@builder.io/sdk-qwik 0.0.2-1 → 0.0.6

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.
Files changed (19) hide show
  1. package/README.md +2 -65
  2. package/package.json +2 -3
  3. package/src/blocks/button/button.jsx +94 -108
  4. package/src/blocks/form/builder-blocks.jsx +30 -44
  5. package/src/blocks/form/form.jsx +1 -8
  6. package/src/blocks/symbol/symbol.jsx +5 -24
  7. package/src/blocks/util.js +0 -5
  8. package/src/components/render-block/block-styles.jsx +35 -47
  9. package/src/components/render-block/render-block.jsx +214 -230
  10. package/src/components/render-block/render-component.jsx +103 -115
  11. package/src/components/render-block/render-repeated-block.jsx +11 -26
  12. package/src/components/render-content/components/render-styles.jsx +11 -25
  13. package/src/components/render-content/render-content.jsx +92 -99
  14. package/src/components/render-inlined-styles.jsx +66 -78
  15. package/src/functions/get-content/index.js +0 -3
  16. package/src/functions/get-fetch.js +2 -1
  17. package/src/scripts/init-editing.js +5 -4
  18. package/tsconfig.json +1 -1
  19. package/types.d.ts +12 -7
package/README.md CHANGED
@@ -1,70 +1,7 @@
1
1
  # Builder.io SDK for Qwik
2
2
 
3
- Use Qwik SDK to connect your Qwik application to Builder.io.
4
-
5
- ## Installation
6
-
7
- Installing the Qwik SDK is done in two steps:
8
-
9
- 1. Set up Qwik-city project.
10
- 2. Install the Qwik SDK into your Qwik-city project.
11
-
12
- ### Set up Qwik-city project
13
-
14
- 1. Follow the instructions on [Qwik-city](https://qwik.builder.io/qwikcity/overview)
15
-
16
- ```bash
17
- npm init qwik@latest
18
- ```
19
-
20
- Follow instructions for setting up Qwik-city project.
21
-
22
- ### Install the Qwik SDK into your Qwik-city project
23
-
24
- Add the following line to your `package.json` file:
25
-
26
- ```bash
27
- npm add --save @builder.io/sdk-qwik
28
- ```
29
-
30
- Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)
31
-
32
- ```typscript
33
- import { component$, Host, Resource, useResource$ } from "@builder.io/qwik";
34
- import { DocumentHead, useLocation } from "@builder.io/qwik-city";
35
- import { getContent, RenderContent } from "@builder.io/sdk-qwik";
36
-
37
- export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
38
- export default component$(() => {
39
- const location = useLocation();
40
- const builderContentRsrc = useResource$<any>(() => {
41
- return getContent({
42
- model: "page",
43
- apiKey: BUILDER_PUBLIC_API_KEY,
44
- userAttributes: {
45
- urlPath: location.pathname || "/",
46
- },
47
- });
48
- });
49
-
50
- return (
51
- <Host>
52
- <Resource
53
- resource={builderContentRsrc}
54
- onPending={() => <div>Loading...</div>}
55
- onResolved={(content) => (
56
- <RenderContent
57
- model="page"
58
- content={content}
59
- apiKey={BUILDER_PUBLIC_API_KEY}
60
- />
61
- )}
62
- />
63
- </Host>
64
- );
65
- });
66
- ```
3
+ More info coming soon.
67
4
 
68
5
  ## Mitosis
69
6
 
70
- This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src).
7
+ This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-qwik",
3
- "version": "0.0.2-1",
3
+ "version": "0.0.6",
4
4
  "description": "Builder.io Qwik SDK",
5
5
  "type": "module",
6
6
  "main": "./lib/index.qwik.cjs",
@@ -12,13 +12,12 @@
12
12
  "require": "./lib/index.qwik.cjs"
13
13
  }
14
14
  },
15
- "types": "./types.d.ts",
16
15
  "scripts": {
17
16
  "build.lib": "vite build --mode lib",
18
17
  "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
19
18
  },
20
19
  "devDependencies": {
21
- "@builder.io/qwik": "0.0.39-dev20220805031634",
20
+ "@builder.io/qwik": "0.0.40-0-dev20220808233008",
22
21
  "@types/node": "latest",
23
22
  "typescript": "4.7.4",
24
23
  "vite": "3.0.2"
package/src/blocks/button/button.jsx CHANGED
@@ -1,24 +1,22 @@
1
1
  // GENERATED BY MITOSIS
2
2
 
3
- import { Fragment, Host, component$, h } from "@builder.io/qwik";
3
+ import { Fragment, component$, h } from "@builder.io/qwik";
4
4
  export const Button = component$((props) => {
5
5
  return (
6
- <Host q:host-pseudo="">
7
- <Fragment>
8
- {props.link ? (
9
- <a
10
- role="button"
11
- {...props.attributes}
12
- href={props.link}
13
- target={props.openLinkInNewTab ? "_blank" : undefined}
14
- >
15
- {props.text}
16
- </a>
17
- ) : (
18
- <span {...props.attributes}>{props.text}</span>
19
- )}
20
- </Fragment>
21
- </Host>
6
+ <Fragment>
7
+ {props.link ? (
8
+ <a
9
+ role="button"
10
+ {...props.attributes}
11
+ href={props.link}
12
+ target={props.openLinkInNewTab ? "_blank" : undefined}
13
+ >
14
+ {props.text}
15
+ </a>
16
+ ) : (
17
+ <span {...props.attributes}>{props.text}</span>
18
+ )}
19
+ </Fragment>
22
20
  );
23
21
  });
24
22
  export default Button;
@@ -33,71 +31,92 @@ export const COMPONENT = {
33
31
  children: [
34
32
  {
35
33
  "@type": "@builder.io/mitosis/node",
36
- name: "Host",
34
+ name: "Fragment",
37
35
  meta: {},
38
36
  scope: {},
39
- properties: {
40
- "q:host-pseudo": "",
41
- },
37
+ properties: {},
42
38
  bindings: {},
43
39
  children: [
44
40
  {
45
41
  "@type": "@builder.io/mitosis/node",
46
- name: "Fragment",
42
+ name: "div",
47
43
  meta: {},
48
44
  scope: {},
49
- properties: {},
45
+ properties: {
46
+ _text: "\n ",
47
+ },
50
48
  bindings: {},
51
- children: [
52
- {
49
+ children: [],
50
+ },
51
+ {
52
+ "@type": "@builder.io/mitosis/node",
53
+ name: "Show",
54
+ meta: {
55
+ else: {
53
56
  "@type": "@builder.io/mitosis/node",
54
- name: "div",
57
+ name: "span",
55
58
  meta: {},
56
59
  scope: {},
57
- properties: {
58
- _text: "\n ",
60
+ properties: {},
61
+ bindings: {
62
+ _spread: {
63
+ code: "props.attributes",
64
+ },
59
65
  },
60
- bindings: {},
61
- children: [],
62
- },
63
- {
64
- "@type": "@builder.io/mitosis/node",
65
- name: "Show",
66
- meta: {
67
- else: {
66
+ children: [
67
+ {
68
68
  "@type": "@builder.io/mitosis/node",
69
- name: "span",
69
+ name: "div",
70
70
  meta: {},
71
71
  scope: {},
72
72
  properties: {},
73
73
  bindings: {
74
- _spread: {
75
- code: "props.attributes",
74
+ _text: {
75
+ code: "props.text",
76
76
  },
77
77
  },
78
- children: [
79
- {
80
- "@type": "@builder.io/mitosis/node",
81
- name: "div",
82
- meta: {},
83
- scope: {},
84
- properties: {},
85
- bindings: {
86
- _text: {
87
- code: "props.text",
88
- },
89
- },
90
- children: [],
91
- },
92
- ],
78
+ children: [],
93
79
  },
80
+ ],
81
+ },
82
+ },
83
+ scope: {},
84
+ properties: {},
85
+ bindings: {
86
+ when: {
87
+ code: "props.link",
88
+ },
89
+ },
90
+ children: [
91
+ {
92
+ "@type": "@builder.io/mitosis/node",
93
+ name: "div",
94
+ meta: {},
95
+ scope: {},
96
+ properties: {
97
+ _text: "\n ",
94
98
  },
99
+ bindings: {},
100
+ children: [],
101
+ },
102
+ {
103
+ "@type": "@builder.io/mitosis/node",
104
+ name: "a",
105
+ meta: {},
95
106
  scope: {},
96
- properties: {},
107
+ properties: {
108
+ role: "button",
109
+ },
97
110
  bindings: {
98
- when: {
111
+ _spread: {
112
+ code: "props.attributes",
113
+ },
114
+ href: {
99
115
  code: "props.link",
100
116
  },
117
+ target: {
118
+ code: "props.openLinkInNewTab ? '_blank' : undefined",
119
+ },
101
120
  },
102
121
  children: [
103
122
  {
@@ -106,67 +125,23 @@ export const COMPONENT = {
106
125
  meta: {},
107
126
  scope: {},
108
127
  properties: {
109
- _text: "\n ",
128
+ _text: "\n ",
110
129
  },
111
130
  bindings: {},
112
131
  children: [],
113
132
  },
114
133
  {
115
134
  "@type": "@builder.io/mitosis/node",
116
- name: "a",
135
+ name: "div",
117
136
  meta: {},
118
137
  scope: {},
119
- properties: {
120
- role: "button",
121
- },
138
+ properties: {},
122
139
  bindings: {
123
- _spread: {
124
- code: "props.attributes",
125
- },
126
- href: {
127
- code: "props.link",
128
- },
129
- target: {
130
- code: "props.openLinkInNewTab ? '_blank' : undefined",
140
+ _text: {
141
+ code: "props.text",
131
142
  },
132
143
  },
133
- children: [
134
- {
135
- "@type": "@builder.io/mitosis/node",
136
- name: "div",
137
- meta: {},
138
- scope: {},
139
- properties: {
140
- _text: "\n ",
141
- },
142
- bindings: {},
143
- children: [],
144
- },
145
- {
146
- "@type": "@builder.io/mitosis/node",
147
- name: "div",
148
- meta: {},
149
- scope: {},
150
- properties: {},
151
- bindings: {
152
- _text: {
153
- code: "props.text",
154
- },
155
- },
156
- children: [],
157
- },
158
- {
159
- "@type": "@builder.io/mitosis/node",
160
- name: "div",
161
- meta: {},
162
- scope: {},
163
- properties: {
164
- _text: "\n ",
165
- },
166
- bindings: {},
167
- children: [],
168
- },
169
- ],
144
+ children: [],
170
145
  },
171
146
  {
172
147
  "@type": "@builder.io/mitosis/node",
@@ -174,7 +149,7 @@ export const COMPONENT = {
174
149
  meta: {},
175
150
  scope: {},
176
151
  properties: {
177
- _text: "\n ",
152
+ _text: "\n ",
178
153
  },
179
154
  bindings: {},
180
155
  children: [],
@@ -187,13 +162,24 @@ export const COMPONENT = {
187
162
  meta: {},
188
163
  scope: {},
189
164
  properties: {
190
- _text: "\n ",
165
+ _text: "\n ",
191
166
  },
192
167
  bindings: {},
193
168
  children: [],
194
169
  },
195
170
  ],
196
171
  },
172
+ {
173
+ "@type": "@builder.io/mitosis/node",
174
+ name: "div",
175
+ meta: {},
176
+ scope: {},
177
+ properties: {
178
+ _text: "\n ",
179
+ },
180
+ bindings: {},
181
+ children: [],
182
+ },
197
183
  ],
198
184
  },
199
185
  ],
package/src/blocks/form/builder-blocks.jsx CHANGED
@@ -1,13 +1,11 @@
1
1
  // GENERATED BY MITOSIS
2
2
 
3
- import { Fragment, Host, component$, h } from "@builder.io/qwik";
3
+ import { Fragment, component$, h } from "@builder.io/qwik";
4
4
  export const BuilderBlocks = component$((props) => {
5
5
  return (
6
- <Host q:host-pseudo="">
7
- <Fragment>
8
- NOT YET IMPLEMENTED: <code>BuilderBlocks</code>
9
- </Fragment>
10
- </Host>
6
+ <Fragment>
7
+ NOT YET IMPLEMENTED: <code>BuilderBlocks</code>
8
+ </Fragment>
11
9
  );
12
10
  });
13
11
  export default BuilderBlocks;
@@ -22,17 +20,26 @@ export const COMPONENT = {
22
20
  children: [
23
21
  {
24
22
  "@type": "@builder.io/mitosis/node",
25
- name: "Host",
23
+ name: "Fragment",
26
24
  meta: {},
27
25
  scope: {},
28
- properties: {
29
- "q:host-pseudo": "",
30
- },
26
+ properties: {},
31
27
  bindings: {},
32
28
  children: [
33
29
  {
34
30
  "@type": "@builder.io/mitosis/node",
35
- name: "Fragment",
31
+ name: "div",
32
+ meta: {},
33
+ scope: {},
34
+ properties: {
35
+ _text: "\n NOT YET IMPLEMENTED: ",
36
+ },
37
+ bindings: {},
38
+ children: [],
39
+ },
40
+ {
41
+ "@type": "@builder.io/mitosis/node",
42
+ name: "code",
36
43
  meta: {},
37
44
  scope: {},
38
45
  properties: {},
@@ -44,45 +51,24 @@ export const COMPONENT = {
44
51
  meta: {},
45
52
  scope: {},
46
53
  properties: {
47
- _text: "\n NOT YET IMPLEMENTED: ",
48
- },
49
- bindings: {},
50
- children: [],
51
- },
52
- {
53
- "@type": "@builder.io/mitosis/node",
54
- name: "code",
55
- meta: {},
56
- scope: {},
57
- properties: {},
58
- bindings: {},
59
- children: [
60
- {
61
- "@type": "@builder.io/mitosis/node",
62
- name: "div",
63
- meta: {},
64
- scope: {},
65
- properties: {
66
- _text: "BuilderBlocks",
67
- },
68
- bindings: {},
69
- children: [],
70
- },
71
- ],
72
- },
73
- {
74
- "@type": "@builder.io/mitosis/node",
75
- name: "div",
76
- meta: {},
77
- scope: {},
78
- properties: {
79
- _text: "\n ",
54
+ _text: "BuilderBlocks",
80
55
  },
81
56
  bindings: {},
82
57
  children: [],
83
58
  },
84
59
  ],
85
60
  },
61
+ {
62
+ "@type": "@builder.io/mitosis/node",
63
+ name: "div",
64
+ meta: {},
65
+ scope: {},
66
+ properties: {
67
+ _text: "\n ",
68
+ },
69
+ bindings: {},
70
+ children: [],
71
+ },
86
72
  ],
87
73
  },
88
74
  ],
package/src/blocks/form/form.jsx CHANGED
@@ -1,7 +1,6 @@
1
1
  // GENERATED BY MITOSIS
2
2
 
3
3
  import RenderBlock from "../../components/render-block/render-block";
4
- import BuilderContext from "../../context/builder.context";
5
4
  import { isEditing } from "../../functions/is-editing.js";
6
5
  import BuilderBlocks from "./builder-blocks";
7
6
  import {
@@ -335,12 +334,6 @@ export const COMPONENT = {
335
334
  },
336
335
  path: "./builder-blocks.lite",
337
336
  },
338
- {
339
- imports: {
340
- BuilderContext: "default",
341
- },
342
- path: "../../context/builder.context.lite",
343
- },
344
337
  ],
345
338
  exports: {},
346
339
  inputs: [],
@@ -771,7 +764,7 @@ export const COMPONENT = {
771
764
  get: {
772
765
  builderContext: {
773
766
  name: "BuilderContext",
774
- path: "../../context/builder.context.lite:default",
767
+ path: null,
775
768
  },
776
769
  },
777
770
  set: {},
package/src/blocks/symbol/symbol.jsx CHANGED
@@ -16,26 +16,14 @@ import {
16
16
  export const Symbol = component$(
17
17
  (props) => {
18
18
  const builderContext = useContext(BuilderContext);
19
- const state = useStore({
20
- className: "builder-symbol",
21
- content: null,
22
- symbolContent: null,
23
- symbolModel: null,
24
- symbolEntry: null,
25
- });
19
+ const state = useStore({ className: "builder-symbol", content: null });
26
20
  useClientEffect$(() => {
27
21
  state.content = props.symbol?.content;
28
22
  });
29
23
  useWatch$(({ track }) => {
30
- props && track(props, "symbol");
31
- state.symbolContent = props.symbol?.content || null;
32
- state.symbolModel = props.symbol?.model || null;
33
- state.symbolEntry = props.symbol?.entry || null;
34
- });
35
- useWatch$(({ track }) => {
36
- state && track(state, "symbolContent");
37
- state && track(state, "symbolModel");
38
- state && track(state, "symbolEntry");
24
+ props.symbol && track(props.symbol, "content");
25
+ props.symbol && track(props.symbol, "model");
26
+ props.symbol && track(props.symbol, "entry");
39
27
  state && track(state, "content");
40
28
  const symbolToUse = props.symbol;
41
29
  /**
@@ -120,9 +108,6 @@ export const COMPONENT = {
120
108
  state: {
121
109
  className: "builder-symbol",
122
110
  content: null,
123
- symbolContent: null,
124
- symbolModel: null,
125
- symbolEntry: null,
126
111
  },
127
112
  children: [
128
113
  {
@@ -201,13 +186,9 @@ export const COMPONENT = {
201
186
  code: "\n state.content = props.symbol?.content;\n",
202
187
  },
203
188
  onUpdate: [
204
- {
205
- code: "\n state.symbolContent = props.symbol?.content || null;\n state.symbolModel = props.symbol?.model || null;\n state.symbolEntry = props.symbol?.entry || null;\n",
206
- deps: "[props.symbol]",
207
- },
208
189
  {
209
190
  code: "\n const symbolToUse = props.symbol;\n /**\n * If:\n * - we have a symbol prop\n * - yet it does not have any content\n * - and we have not already stored content from before\n * - and it has a model name\n *\n * then we want to re-fetch the symbol content.\n */\n\n if (symbolToUse && !symbolToUse.content && !state.content && symbolToUse.model) {\n getContent({\n model: symbolToUse.model,\n apiKey: builderContext.apiKey!,\n query: {\n id: symbolToUse.entry\n }\n }).then(response => {\n state.content = response;\n });\n }\n",
210
- deps: "[state.symbolContent, state.symbolModel, state.symbolEntry, state.content]",
191
+ deps: "[props.symbol?.content, props.symbol?.model, props.symbol?.entry, state.content]",
211
192
  },
212
193
  ],
213
194
  },
package/src/blocks/util.js CHANGED
@@ -2,11 +2,6 @@ function markSerializable(fn) {
2
2
  fn.__qwik_serializable__ = true;
3
3
  return fn;
4
4
  }
5
- const StableObject = {
6
- values: (obj2) => Object.values(obj2),
7
- spread: (...objs) => Object.assign({}, obj)
8
- };
9
5
  export {
10
- StableObject,
11
6
  markSerializable
12
7
  };