create-qwik 0.0.18-1 → 0.0.18-3-dev20220318185338
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
{
|
|
2
|
+
"Qwik component": {
|
|
3
|
+
"scope": "typescriptreact",
|
|
4
|
+
"prefix": "component$",
|
|
5
|
+
"description": "Qwik counter component",
|
|
6
|
+
"body": [
|
|
7
|
+
"export interface ${1:MyCmp}Props {",
|
|
8
|
+
" step: number;",
|
|
9
|
+
"}",
|
|
10
|
+
"",
|
|
11
|
+
"export const ${1:MyCmp} = component$((props: ${1:MyCmp}Props) => {",
|
|
12
|
+
" const state = useStore({",
|
|
13
|
+
" count: 0",
|
|
14
|
+
" });",
|
|
15
|
+
" $0",
|
|
16
|
+
" return $(() => {",
|
|
17
|
+
" return (",
|
|
18
|
+
" <Host>",
|
|
19
|
+
" <button on$:click={() => state.count += props.step}>",
|
|
20
|
+
" {state.count}",
|
|
21
|
+
" </button>",
|
|
22
|
+
" </Host>",
|
|
23
|
+
" );",
|
|
24
|
+
" });",
|
|
25
|
+
"});"
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
"Qwik component (basic)": {
|
|
29
|
+
"scope": "javascriptreact,typescriptreact",
|
|
30
|
+
"prefix": "component$basic",
|
|
31
|
+
"description": "Basic Qwik component",
|
|
32
|
+
"body": [
|
|
33
|
+
"export const ${1:MyCmp} = component$(() => {",
|
|
34
|
+
" return $(() => {",
|
|
35
|
+
" return (",
|
|
36
|
+
" <Host>",
|
|
37
|
+
" <div>",
|
|
38
|
+
" ${1:MyCmp}",
|
|
39
|
+
" </div>",
|
|
40
|
+
" </Host>",
|
|
41
|
+
" );",
|
|
42
|
+
" });",
|
|
43
|
+
"});"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
"Qwik state": {
|
|
47
|
+
"scope": "javascriptreact,typescriptreact",
|
|
48
|
+
"prefix": "useStore$",
|
|
49
|
+
"description": "useStore() declaration",
|
|
50
|
+
"body": [
|
|
51
|
+
"const ${1:state} = useStore({",
|
|
52
|
+
" $2",
|
|
53
|
+
"});",
|
|
54
|
+
"$0"
|
|
55
|
+
]
|
|
56
|
+
},
|
|
57
|
+
"$ hook": {
|
|
58
|
+
"scope": "javascriptreact,typescriptreact",
|
|
59
|
+
"prefix": "$",
|
|
60
|
+
"description": "$() function hook",
|
|
61
|
+
"body": [
|
|
62
|
+
"$(() => {",
|
|
63
|
+
" $0",
|
|
64
|
+
"});",
|
|
65
|
+
""
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -6,13 +6,13 @@ import './global.css';
|
|
|
6
6
|
export const Main = component$(() => {
|
|
7
7
|
const state = useStore({ name: 'World' });
|
|
8
8
|
return $(() => (
|
|
9
|
-
<Host class="my-app">
|
|
10
|
-
<Logo />
|
|
9
|
+
<Host class="my-app p-20">
|
|
10
|
+
<Logo class="mb-10" />
|
|
11
11
|
|
|
12
|
-
<
|
|
12
|
+
<h1 class="text-3xl mb-2">Congratulations Qwik is working!</h1>
|
|
13
13
|
|
|
14
|
-
<
|
|
15
|
-
<ol>
|
|
14
|
+
<h2 class="text-2xl my-1">Next steps:</h2>
|
|
15
|
+
<ol class="list-decimal list-inside ml-10">
|
|
16
16
|
<li>
|
|
17
17
|
Open dev-tools network tab and notice that no JavaScript was downloaded to render this
|
|
18
18
|
page. (Zero JavaScript no matter the size of your app.)
|
|
@@ -21,6 +21,8 @@ export const Main = component$(() => {
|
|
|
21
21
|
Try interacting with this component by changing{' '}
|
|
22
22
|
<input
|
|
23
23
|
value={state.name}
|
|
24
|
+
class="border-2 border-solid border-blue-500"
|
|
25
|
+
placeholder="Write some text"
|
|
24
26
|
on$:keyup={() => {
|
|
25
27
|
const event = useEvent<KeyboardEvent>();
|
|
26
28
|
const input = event.target as HTMLInputElement;
|
|
@@ -43,8 +45,8 @@ export const Main = component$(() => {
|
|
|
43
45
|
<li>Replace the content of this component with your code.</li>
|
|
44
46
|
<li>Build amazing web-sites with unbeatable startup performance.</li>
|
|
45
47
|
</ol>
|
|
46
|
-
<hr />
|
|
47
|
-
<p
|
|
48
|
+
<hr class="mt-10" />
|
|
49
|
+
<p class="text-center text-sm mt-2">
|
|
48
50
|
Made with ❤️ by{' '}
|
|
49
51
|
<a target="_blank" href="https://www.builder.io/">
|
|
50
52
|
Builder.io
|