@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 CHANGED
@@ -1,169 +1,23 @@
1
- # Builder.io SDK for Qwik
1
+ # Builder.io Qwik SDK
2
2
 
3
- Use Qwik SDK to connect your Qwik application to Builder.io.
3
+ This is Builder's Qwik SDK.
4
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
- ### 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
- export const MyFunComponent = component$((props: { text: string }) => {
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
- return (
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
- export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
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
- inputs: [
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
- #### Reasons to switch to API Version v3
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
- _Coming soon..._
21
+ ## Fetch
163
22
 
164
- - Better support for localization: Some of the newer features of localization and querying based on it will be better supported in Query V3
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.