@builder.io/sdk-qwik 0.14.16 → 0.14.18
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/README.md +11 -157
- package/lib/browser/index.qwik.cjs +585 -246
- package/lib/browser/index.qwik.mjs +585 -246
- package/lib/edge/index.qwik.cjs +585 -246
- package/lib/edge/index.qwik.mjs +585 -246
- package/lib/node/index.qwik.cjs +585 -246
- package/lib/node/index.qwik.mjs +585 -246
- package/package.json +1 -1
- package/types/src/blocks/button/button.d.ts +1 -0
- package/types/src/blocks/columns/columns.d.ts +8 -1
- package/types/src/blocks/columns/columns.types.d.ts +1 -1
- package/types/src/blocks/columns/helpers.d.ts +1 -0
- package/types/src/blocks/symbol/symbol.d.ts +1 -1
- package/types/src/blocks/tabs/component-info.d.ts +2 -0
- package/types/src/blocks/tabs/index.d.ts +1 -0
- package/types/src/blocks/tabs/tabs.d.ts +5 -0
- package/types/src/blocks/tabs/tabs.types.d.ts +13 -0
- package/types/src/blocks/text/text.types.d.ts +2 -1
- package/types/src/components/block/block.helpers.d.ts +2 -0
- package/types/src/components/blocks/blocks-wrapper.d.ts +2 -2
- package/types/src/components/content/components/enable-editor.d.ts +7 -7
- package/types/src/components/content/components/styles.helpers.d.ts +1 -0
- package/types/src/components/dynamic-div.d.ts +14 -0
- package/types/src/constants/sdk-version.d.ts +1 -1
- package/types/src/types/targets.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,169 +1,23 @@
|
|
|
1
|
-
# Builder.io SDK
|
|
1
|
+
# Builder.io Qwik SDK
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This is Builder's Qwik SDK.
|
|
4
4
|
|
|
5
|
-
##
|
|
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
|
-
### Fetch
|
|
13
|
-
|
|
14
|
-
This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.
|
|
15
|
-
|
|
16
|
-
### Set up Qwik-city project
|
|
17
|
-
|
|
18
|
-
1. Follow the instructions on [Qwik-city](https://qwik.builder.io/qwikcity/overview)
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm init qwik@latest
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Follow instructions for setting up Qwik-city project.
|
|
25
|
-
|
|
26
|
-
### Install the Qwik SDK into your Qwik-city project
|
|
27
|
-
|
|
28
|
-
Add `@builder.io/sdk-qwik` to your `package.json` file:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
npm add --save @builder.io/sdk-qwik
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)
|
|
35
|
-
|
|
36
|
-
```typscript
|
|
37
|
-
import { component$ } from "@builder.io/qwik";
|
|
38
|
-
import { loader$ } from "@builder.io/qwik-city";
|
|
39
|
-
import {
|
|
40
|
-
getBuilderSearchParams,
|
|
41
|
-
getContent,
|
|
42
|
-
RenderContent,
|
|
43
|
-
} from "@builder.io/sdk-qwik";
|
|
44
|
-
|
|
45
|
-
export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
|
|
46
|
-
export const MODEL = 'page';
|
|
47
|
-
|
|
48
|
-
export const builderContentLoader = loader$(({ url }) => {
|
|
49
|
-
return getContent({
|
|
50
|
-
model: MODEL,
|
|
51
|
-
apiKey: BUILDER_PUBLIC_API_KEY,
|
|
52
|
-
options: {
|
|
53
|
-
...getBuilderSearchParams(url.searchParams),
|
|
54
|
-
cachebust: true,
|
|
55
|
-
},
|
|
56
|
-
userAttributes: {
|
|
57
|
-
urlPath: url.pathname || "/",
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
export default component$(() => {
|
|
63
|
-
const builderContent = builderContentLoader.use();
|
|
64
|
-
return (
|
|
65
|
-
<div>
|
|
66
|
-
<RenderContent
|
|
67
|
-
model={MODEL}
|
|
68
|
-
content={builderContent.value}
|
|
69
|
-
apiKey={BUILDER_PUBLIC_API_KEY}
|
|
70
|
-
// Optional: pass in a custom component registry
|
|
71
|
-
// customComponents={CUSTOM_COMPONENTS}
|
|
72
|
-
/>
|
|
73
|
-
</div>
|
|
74
|
-
);
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
// OPTIONAL: need to add custom components to your Qwik app
|
|
5
|
+
## Mitosis
|
|
78
6
|
|
|
79
|
-
|
|
80
|
-
const state = useStore({
|
|
81
|
-
count: 0,
|
|
82
|
-
});
|
|
7
|
+
This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
|
|
83
8
|
|
|
84
|
-
|
|
85
|
-
<div>
|
|
86
|
-
<h3>{props.text.toUpperCase()}</h3>
|
|
87
|
-
<p>{state.count}</p>
|
|
88
|
-
<button onClick$={() => state.count++}>Click me</button>
|
|
89
|
-
</div>
|
|
90
|
-
);
|
|
91
|
-
});
|
|
9
|
+
## Feature Support
|
|
92
10
|
|
|
93
|
-
|
|
94
|
-
{
|
|
95
|
-
component: MyFunComponent,
|
|
96
|
-
name: 'MyFunComponent',
|
|
11
|
+
To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
|
|
97
12
|
|
|
98
|
-
|
|
99
|
-
{
|
|
100
|
-
name: 'text',
|
|
101
|
-
type: 'string',
|
|
102
|
-
defaultValue: 'Hello world',
|
|
103
|
-
},
|
|
104
|
-
],
|
|
105
|
-
},
|
|
106
|
-
];
|
|
13
|
+
## Getting Started
|
|
107
14
|
|
|
108
15
|
```
|
|
109
|
-
|
|
110
|
-
### [Beta] Guide to use API Version v3 to query for content
|
|
111
|
-
|
|
112
|
-
For using API Version `v3`, you need to add `apiVersion: 'v3'` to the `getContent` function and in the `RenderContent` tag. For example:
|
|
113
|
-
|
|
114
|
-
```typscript
|
|
115
|
-
import { component$ } from "@builder.io/qwik";
|
|
116
|
-
import { loader$ } from "@builder.io/qwik-city";
|
|
117
|
-
import {
|
|
118
|
-
getBuilderSearchParams,
|
|
119
|
-
getContent,
|
|
120
|
-
RenderContent,
|
|
121
|
-
} from "@builder.io/sdk-qwik";
|
|
122
|
-
|
|
123
|
-
export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE";
|
|
124
|
-
export const MODEL = "page";
|
|
125
|
-
|
|
126
|
-
export const builderContentLoader = loader$(({ url }) => {
|
|
127
|
-
return getContent({
|
|
128
|
-
model: MODEL,
|
|
129
|
-
apiKey: BUILDER_PUBLIC_API_KEY,
|
|
130
|
-
apiVersion: "v3",
|
|
131
|
-
options: {
|
|
132
|
-
...getBuilderSearchParams(url.searchParams),
|
|
133
|
-
cachebust: true,
|
|
134
|
-
},
|
|
135
|
-
userAttributes: {
|
|
136
|
-
urlPath: url.pathname || "/",
|
|
137
|
-
},
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
export default component$(() => {
|
|
142
|
-
const builderContent = builderContentLoader.use();
|
|
143
|
-
return (
|
|
144
|
-
<div>
|
|
145
|
-
<RenderContent
|
|
146
|
-
model={MODEL}
|
|
147
|
-
content={builderContent.value}
|
|
148
|
-
apiKey={BUILDER_PUBLIC_API_KEY}
|
|
149
|
-
apiVersion="v3"
|
|
150
|
-
/>
|
|
151
|
-
</div>
|
|
152
|
-
);
|
|
153
|
-
});
|
|
154
|
-
|
|
16
|
+
npm install @builder.io/sdk-svelte@dev
|
|
155
17
|
```
|
|
156
18
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
- Better, more scalable infra: Query v3 is built on global scale infrastructure to ensure fast response times and high availability
|
|
160
|
-
- Ability to ship more features, faster: Query V3 will allow us to keep shipping the latest features to our customers without breaking fundamental flows. These will be shipped only to Query V3 and not to the older versions of the query API
|
|
19
|
+
Take a look at [our example repo](https://github.com/BuilderIO/builder/tree/main/examples/qwik) for how to use this SDK.
|
|
161
20
|
|
|
162
|
-
|
|
21
|
+
## Fetch
|
|
163
22
|
|
|
164
|
-
|
|
165
|
-
- Support multi-level nested references: Query V3 will allow you to query, resolve, and return content that has nested references of other contents and symbols.
|
|
166
|
-
|
|
167
|
-
## Mitosis
|
|
168
|
-
|
|
169
|
-
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).
|
|
23
|
+
This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.
|