10000 init · wt-cristiano/nativescript-vue@8e1d2b3 · GitHub
[go: up one dir, main page]

Skip to content

Commit 8e1d2b3

Browse files
committed
init
0 parents  commit 8e1d2b3

File tree

24 files changed

+1850
-0
lines changed

24 files changed

+1850
-0
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
**/dist
2+
3+
yarn-error.log

.vscode/settings.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"files.exclude": {
3+
"**/.git": true,
4+
"**/.svn": true,
5+
"**/.hg": true,
6+
"**/CVS": true,
7+
"**/.DS_Store": true,
8+
"**/Thumbs.db": true,
9+
"**/*.js": {
10+
"when": "$(basename).ts"
11+
},
12+
"**/*.map": true,
13+
"**/.idea": false,
14+
"**/.tscache": true,
15+
"**/node_modules": true
16+
}
17+
}

demo_/index.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {
2+
createApp,
3+
defineComponent,
4+
registerUnknownViewResolver,
5+
} from "../src/withCompiler";
6+
7+
registerUnknownViewResolver((name) => {
8+
return class {
9+
constructor() {
10+
console.log("creating", name);
11+
}
12+
};
13+
});
14+
15+
const TestComponent = defineComponent({
16+
data() {
17+
return {
18+
show: false,
19+
};
20+
},
21+
created() {
22+
setInterval(() => {
23+
this.show = !this.show;
24+
}, 1000);
25+
},
26+
template: `<section>
27+
<span v-show="show">vshow</span>
28+
<span v-show="show" visibility="block">vshow</span>
29+
</section>`,
30+
});
31+
32+
const app = createApp({
33+
components: {
34+
TestComponent,
35+
Foo: {
36+
props: ["name"],
37+
template: "<div>{{ name }}</div>",
38+
},
39+
},
40+
template: `<div>Hello App! <Foo name="John Doe"/> <TestComponent/></div>`,
41+
}).start();

package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "ns-vue-next-v2",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"build": "esbuild --bundle --define:__VUE_OPTIONS_API__=true --define:__VUE_PROD_DEVTOOLS__=true --sourcemap --format=esm --outdir=dist --out-extension:.js=.mjs ./src/test.ts",
8+
"build:compiler": "esbuild --bundle --define:__VUE_OPTIONS_API__=true --define:__VUE_PROD_DEVTOOLS__=true --sourcemap --format=cjs --outdir=dist --out-extension:.js=.cjs ./src/compiler.ts"
9+
},
10+
"devDependencies": {
11+
"@nativescript/core": "^8.3.5",
12+
"@vue/compiler-dom": "^3.2.41",
13+
"@vue/runtime-dom": "^3.2.41",
14+
"esbuild": "^0.15.12",
15+
"tsx": "^3.11.0",
16+
"typescript": "^4.8.4",
17+
"vue": "^3.2.41"
18+
}
19+
}

src/compiler.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { compile, CompilerError, CompilerOptions } from "@vue/compiler-dom";
2+
import { RenderFunction, warn } from "@vue/runtime-dom";
3+
import * as runtime from "./index";
4+
5+
const NOOP = () => {};
6+
const compileCache: Record<string, RenderFunction> = Object.create(null);
7+
8+
export function compileToFunction(
9+
template: string,
10+
options?: CompilerOptions
11+
): RenderFunction {
12+
if (typeof template !== "string") {
13+
warn("invalid template option: ", template);
14+
return NOOP;
15+
}
16+
17+
const key = template;
18+
const cached = compileCache[key];
19+
20+
if (cached) {
21+
return cached;
22+
}
23+
24+
const { code } = compile(template, {
25+
isNativeTag: (tag) => true,
26+
hoistStatic: true,
27+
prefixIdentifiers: true,
28+
onWarn(warn: CompilerError) {
29+
console.warn("warn", warn);
30+
},
31+
onError(err: CompilerError) {
32+
console.log("err", err);
33+
},
34+
...options,
35+
});
36+
37+
const render = new Function("Vue", code)(runtime) as RenderFunction;
38+
39+
return (compileCache[key] = render);
40+
}
41+
42+
export {
43+
compileToFunction as compile
44+
}

src/components/ListView.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { defineComponent, h, warn } from "@vue/runtime-core";
2+
3+
import { ItemEventData, ListView as NSCListView } from "@nativescript/core";
4+
5+
import { registerElement } from "../registry";
6+
import { NSVElement, NSVRoot, NSVViewFlags } from "../dom";
7+
import { render } from "..";
8+
import { ELEMENT_REF } from "../runtimeHelpers";
9+
10+
registerElement("NSCListView", () => NSCListView, {
11+
viewFlags: NSVViewFlags.NO_CHILDREN,
12+
});
13+
14+
declare global {
15+
interface ListItem<T = any> {
16+
item: T;
17+
index: number;
18+
even: boolean;
19+
odd: boolean;
20+
}
21+
}
22+
23+
export const ListView = defineComponent({
24+
props: ["items"],
25+
26+
setup(props, ctx) {
27+
console.log(props, ctx);
28+
console.log(ctx.slots);
29+
console.log();
30+
31+
return () => {
32+
return h("NSCListView", {
33+
items: props.items,
34+
[`on${NSCListView.itemLoadingEvent}`](event: ItemEventData) {
35+
const el = event.view?.[ELEMENT_REF] as NSVElement;
36+
const container = (el?.parentNode as NSVRoot) ?? new NSVRoot();
37+
38+
const slot = ctx.slots.default({
39+
item: props.items[event.index],
40+
index: event.index,
41+
even: event.index % 2 === 0,
42+
odd: event.index % 2 !== 0,
43+
});
44+
45+
if (slot.length > 1) {
46+
warn(
47+
`ListView template must contain a single root element. Found: ${slot.length}. Only the first one will be used.`
48+
);
49+
}
50+
render(slot[0], container as any);
51+
event.view = container.el.nativeView;
52+
},
53+
});
54+
};
55+
},
56+
});

src/components/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ListView } from "./ListView";
2+
3+
export const BUILT_IN_COMPONENTS = {
4+
ListView,
5+
};

src/directives/vShow.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { ObjectDirective } from "@vue/runtime-core";
2+
import { NSVElement } from "../dom";
3+
4+
interface VShowElement extends NSVElement {
5+
// _vod = vue original display
6+
_vod: string;
7+
}
8+
9+
export const vShow: ObjectDirective<VShowElement> = {
10+
beforeMount(el, { value }, { transition }) {
11+
el._vod =
12+
el.getAttribute("visibility") === "none"
13+
? ""
14+
: (el.getAttribute("visibility") as string);
15+
if (transition && value) {
16+
transition.beforeEnter(el);
17+
} else {
18+
setDisplay(el, value);
19+
}
20+
},
21+
mounted(el, { value }, { transition }) {
22+
if (transition && value) {
23+
transition.enter(el);
24+
}
25+
},
26+
updated(el, { value, oldValue }, { transition }) {
27+
if (!value === !oldValue) return;
28+
if (transition) {
29+
if (value) {
30+
transition.beforeEnter(el);
31+
setDisplay(el, true);
32+
transition.enter(el);
33+
} else {
34+
transition.leave(el, () => {
35+
setDisplay(el, false);
36+
});
37+
}
38+
} else {
39+
setDisplay(el, value);
40+
}
41+
},
42+
beforeUnmount(el) {
43+
setDisplay(el, true);
44+
},
45+
};
46+
47+
function setDisplay(el: VShowElement, value: unknown): void {
48+
el.setAttribute("visibility", value ? el._vod : "collapsed");
49+
}

0 commit comments

Comments
 (0)
0