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

package/README.md

@@ -1,7 +1,70 @@
 # Builder.io SDK for Qwik
 
-More info coming soon.
+Use Qwik SDK to connect your Qwik application to Builder.io.
+
+## Installation
+
+Installing the Qwik SDK is done in two steps:
+
+1. Set up Qwik-city project.
+2. Install the Qwik SDK into your Qwik-city project.
+
+### Set up Qwik-city project
+
+1. Follow the instructions on [Qwik-city](https://qwik.builder.io/qwikcity/overview)
+
+```bash
+npm init qwik@latest
+```
+
+Follow instructions for setting up Qwik-city project.
+
+### Install the Qwik SDK into your Qwik-city project
+
+Add the following line to your `package.json` file:
+
+```bash
+npm add --save @builder.io/sdk-qwik
+```
+
+Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)
+
+```typscript
+import { component$, Host, Resource, useResource$ } from "@builder.io/qwik";
+import { DocumentHead, useLocation } from "@builder.io/qwik-city";
+import { getContent, RenderContent } from "@builder.io/sdk-qwik";
+
+export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
+export default component$(() => {
+  const location = useLocation();
+  const builderContentRsrc = useResource$<any>(() => {
+    return getContent({
+      model: "page",
+      apiKey: BUILDER_PUBLIC_API_KEY,
+      userAttributes: {
+        urlPath: location.pathname || "/",
+      },
+    });
+  });
+
+  return (
+    <Host>
+      <Resource
+        resource={builderContentRsrc}
+        onPending={() => <div>Loading...</div>}
+        onResolved={(content) => (
+          <RenderContent
+            model="page"
+            content={content}
+            apiKey={BUILDER_PUBLIC_API_KEY}
+          />
+        )}
+      />
+    </Host>
+  );
+});
+```
 
 ## Mitosis
 
-This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+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).

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.2-0",
+  "version": "0.0.2-1",
   "description": "Builder.io Qwik SDK",
   "type": "module",
-  "main": "./src/index.js",
-  "module": "./src/index.js",
+  "main": "./lib/index.qwik.cjs",
+  "module": "./lib/index.qwik.mjs",
+  "qwik": "./lib/index.qwik.mjs",
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs",
       "require": "./lib/index.qwik.cjs"
     }
   },
+  "types": "./types.d.ts",
   "scripts": {
     "build.lib": "vite build --mode lib",
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.39",
+    "@builder.io/qwik": "0.0.39-dev20220805031634",
     "@types/node": "latest",
     "typescript": "4.7.4",
     "vite": "3.0.2"

package/src/blocks/columns/columns.jsx

@@ -6,7 +6,7 @@ import {
   Host,
   component$,
   h,
-  useScopedStyles$,
+  useStylesScoped$,
 } from "@builder.io/qwik";
 export const getGutterSize = function getGutterSize(props, state) {
   return typeof props.space === "number" ? props.space || 0 : 20;
@@ -65,7 +65,7 @@ export const columnCssVars = function columnCssVars(props, state) {
 };
 export const Columns = component$(
   (props) => {
-    useScopedStyles$(STYLES);
+    useStylesScoped$(STYLES);
     const state = {};
     return (
       <Host
@@ -95,38 +95,17 @@ export const Columns = component$(
   { tagName: "div" }
 );
 export default Columns;
-export const STYLES = `
-.div-Columns {
-  display: flex;
-  align-items: stretch;
-  line-height: normal;
-}
-@media (max-width: 999px) {
-  .div-Columns {
-    flex-direction: var(--flex-dir-tablet);
-  }
-}
-@media (max-width: 639px) {
-  .div-Columns {
-    flex-direction: var(--flex-dir);
-  }
-}
-.div-Columns-2 {
-  flex-grow: 1;
-}
-@media (max-width: 999px) {
-  .div-Columns-2 {
-    width: var(--column-width-tablet) !important;
-    margin-left: var(--column-margin-left-tablet) !important;
-  }
-}
-@media (max-width: 639px) {
-  .div-Columns-2 {
-    width: var(--column-width) !important;
-    margin-left: var(--column-margin-left) !important;
-  }
-}
-`;
+export const STYLES = `.div-Columns { 
+display: flex;
+align-items: stretch;
+line-height: normal; }@media (max-width: 999px) { .div-Columns { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { 
+flex-direction: var(--flex-dir); } }.div-Columns-2 { 
+flex-grow: 1; }@media (max-width: 999px) { .div-Columns-2 { 
+width: var(--column-width-tablet) !important;
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { 
+width: var(--column-width) !important;
+margin-left: var(--column-margin-left) !important; } }`;
 export const COMPONENT = {
   "@type": "@builder.io/mitosis/component",
   imports: [

package/src/blocks/embed/embed.jsx

@@ -47,7 +47,7 @@ export const Embed = component$(
       scriptsRun: [],
       ranInitFn: false,
     });
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       state && track(state, "ranInitFn");
       if (elem && !state.ranInitFn) {
         state.ranInitFn = true;

package/src/blocks/form/form.jsx

@@ -11,8 +11,8 @@ import {
   h,
   useContext,
   useRef,
-  useScopedStyles$,
   useStore,
+  useStylesScoped$,
 } from "@builder.io/qwik";
 export const submissionState = function submissionState(
   props,
@@ -243,7 +243,7 @@ export const onSubmit = function onSubmit(
 };
 export const FormComponent = component$(
   (props) => {
-    useScopedStyles$(STYLES);
+    useStylesScoped$(STYLES);
     const builderContext = useContext(BuilderContext);
     const formRef = useRef();
     const state = useStore({

package/src/blocks/image/image.jsx

@@ -7,7 +7,7 @@ import {
   Slot,
   component$,
   h,
-  useScopedStyles$,
+  useStylesScoped$,
 } from "@builder.io/qwik";
 export const srcSetToUse = function srcSetToUse(props, state) {
   const imageToUse = props.image || props.src;
@@ -41,7 +41,7 @@ export const webpSrcSet = function webpSrcSet(props, state) {
 };
 export const Image = component$(
   (props) => {
-    useScopedStyles$(STYLES);
+    useStylesScoped$(STYLES);
     const state = {};
     return (
       <Host class="div-Image">

package/src/blocks/symbol/symbol.jsx

@@ -26,13 +26,13 @@ export const Symbol = component$(
     useClientEffect$(() => {
       state.content = props.symbol?.content;
     });
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       props && track(props, "symbol");
       state.symbolContent = props.symbol?.content || null;
       state.symbolModel = props.symbol?.model || null;
       state.symbolEntry = props.symbol?.entry || null;
     });
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       state && track(state, "symbolContent");
       state && track(state, "symbolModel");
       state && track(state, "symbolEntry");

package/src/components/render-blocks.jsx

@@ -10,7 +10,7 @@ import {
   component$,
   h,
   useContext,
-  useScopedStyles$,
+  useStylesScoped$,
 } from "@builder.io/qwik";
 export const className = function className(props, state, builderContext) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -49,7 +49,7 @@ export const onMouseEnter = function onMouseEnter(
 };
 export const RenderBlocks = component$(
   (props) => {
-    useScopedStyles$(STYLES);
+    useStylesScoped$(STYLES);
     const builderContext = useContext(BuilderContext);
     const state = {};
     return (

package/src/components/render-content/render-content.jsx

@@ -267,15 +267,15 @@ export const RenderContent = component$((props) => {
       emitStateUpdate(props, state);
     }
   });
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     state.useContent?.data && track(state.useContent?.data, "jsCode");
     evaluateJsCode(props, state);
   });
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     state.useContent?.data && track(state.useContent?.data, "httpRequests");
     runHttpRequests(props, state);
   });
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     state && track(state, "contentState");
     emitStateUpdate(props, state);
   });

package/src/functions/evaluate.js

@@ -1,33 +1,28 @@
-import { isBrowser } from './is-browser.js';
-import { isEditing } from './is-editing.js';
-function evaluate({ code, context, state, event }) {
-  if (code === '') {
-    console.warn('Skipping evaluation of empty code block.');
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
+function evaluate({
+  code,
+  context,
+  state,
+  event
+}) {
+  if (code === "") {
+    console.warn("Skipping evaluation of empty code block.");
     return;
   }
   const builder = {
     isEditing: isEditing(),
     isBrowser: isBrowser(),
-    isServer: !isBrowser(),
+    isServer: !isBrowser()
   };
-  const useReturn = !(
-    code.includes(';') ||
-    code.includes(' return ') ||
-    code.trim().startsWith('return ')
-  );
+  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function(
-      'builder',
-      'Builder',
-      'state',
-      'context',
-      'event',
-      useCode
-    )(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    debugger;
-    console.warn('Builder custom code error: ', e);
+    console.warn("Builder custom code error: ", e);
   }
 }
-export { evaluate };
+export {
+  evaluate
+};

package/src/functions/get-content/index.js

@@ -80,6 +80,9 @@ function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
     const fetch = yield fetch$;
+    if (!fetch) {
+      throw new Error("Please install a fetch polyfill");
+    }
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       for (const item of content.results) {

package/src/functions/get-fetch.js

@@ -23,8 +23,7 @@ function getFetch() {
   return __async(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch.default || nodeFetch;
+      return import("node-fetch").then((d) => d.default || d);
     }
     return globalFetch.default || globalFetch;
   });

package/src/functions/register.js

@@ -11,8 +11,8 @@ function register(type, info) {
       type: "builder.register",
       data: {
         type,
-        info,
-      },
+        info
+      }
     };
     try {
       parent.postMessage(message, "*");
@@ -24,4 +24,6 @@ function register(type, info) {
     }
   }
 }
-export { register };
+export {
+  register
+};

package/tsconfig.json

@@ -105,6 +105,6 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["types.d.ts", "src"],
+  "include": ["types-hacks.d.ts", "src"],
   "exclude": ["src/blocks/form/form.tsx"]
 }

package/types-hacks.d.ts

@@ -0,0 +1,13 @@
+type Dictionary<T> = Record<string, T>;
+type BuilderContent = any;
+type BuilderBlock = any;
+type RegisteredComponent = any;
+type RegisteredComponents = any;
+declare const builder: { env: 'dev'; apiKey: string };
+// TODO(misko): HACKS to be removed
+declare const get: (obj: any, key: string) => any;
+declare const set: (obj: any, key: string, value: any) => void;
+interface CSSProperties {
+  flexDirection: any;
+}
+declare const BuilderBlocks: (props: any) => any;

package/types.d.ts

@@ -1,13 +1,8 @@
-type Dictionary<T> = Record<string, T>;
-type BuilderContent = any;
-type BuilderBlock = any;
-type RegisteredComponent = any;
-type RegisteredComponents = any;
-declare const builder: { env: 'dev'; apiKey: string };
-// TODO(misko): HACKS to be removed
-declare const get: (obj: any, key: string) => any;
-declare const set: (obj: any, key: string, value: any) => void;
-interface CSSProperties {
-  flexDirection: any;
+declare module '@builder.io/sdk-qwik' {
+  const getContent: (options: {
+    model: string;
+    apiKey: string;
+    userAttributes: Record<string, string>;
+  }) => Promise<any>;
+  const RenderContent: any;
 }
-declare const BuilderBlocks: (props: any) => any;

package/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig(() => {
         formats: ['es', 'cjs'],
         fileName: (format) => `index.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
       },
+      minify: false,
     },
     plugins: [qwikVite()],
   };