@builder.io/sdk-qwik 0.0.16 → 0.0.17

package/types-hacks.d.ts

@@ -10,4 +10,10 @@ declare const set: (obj: any, key: string, value: any) => void;
 interface CSSProperties {
   flexDirection: any;
 }
+interface HTMLAttributes {
+  style?: Record<string, string | number | undefined> | string | undefined;
+}
+interface ImgHTMLAttributes {
+  srcset: any;
+}
 declare const BuilderBlocks: (props: any) => any;

package/DEVELOPER.md

@@ -1,118 +0,0 @@
-# DEVELOPER
-
-This documentation contains instructions on how to setup the environment and develop Qwik SDK.
-
-## Setup
-
-There are many different ways you can set up your environment to develop Qwik SDK, but here is the one which works well for me, and so if you are new to Qwik SDK development you should consider this as a starting point. Feel free to tweak as you see fit after you get familiar with the development.
-
-## Directory Layout
-
-When working on Qwik SDK you will often times need to make changes to, mitosis, qwik, SDK, and a test file. For this reason all of these repositories and testing folders should be next to each other.
-
-Setup your directory structure as shown here:
-
-```bash
-- qwik-sdk-workspace/
-  - builder/              # git clone git@github.com:BuilderIO/builder.git
-  - qwik/                 # git clone git@github.com:BuilderIO/qwik.git
-  - mitosis/              # git clone git@github.com:BuilderIO/mitosis.git
-  - test/                 # npm create qwik@latest # QwikCity starter project
-```
-
-## VS Code
-
-I usually open the `qwik-sdk-workspace` folder in VS Code so that I can easily open and edit any of the files.
-
-## NPM Symlinks
-
-When developing Qwik SDK you may need to change many different repos. For this reason set up the symlinks as shown here:
-
-```bash
-- qwik-sdk-workspace/
-  - builder/
-    - packages/
-      - sdks/
-        - NPM: @builder.io/mitosis => ../../../mitosis/packages/core
-  - qwik/
-  - mitosis/
-  - test/
-    - NPM: @builder.io/qwik => ../qwik/packages/core
-```
-
-## Building / Running
-
-- Mitosis
-
-  ```bash
-  cd mitosis/packages/core
-  yarn start   # Will automatically build and run the SDK
-  ```
-
-- Builder
-
-  ```bash
-  cd builder/packages/sdks
-  yarn build  # Will build the SDK by running mitosis on SDK inputs
-  ```
-
-- Qwik
-
-  ```bash
-  cd qwik/
-  yarn build.full
-  ```
-
-- Test App
-  ```bash
-  cd test/
-  yarn build.ssr
-  ```
-
-## Test application for Qwik SDK
-
-In the Qwik-city create a `[index.tsx]` which will intercept all of the URL requests. Then use something like this to render the content from the Qwik SDK:
-
-```typescript
-export default component$((props: MainProps) => {
-  const context = useStore({});
-
-  useContextProvider(builderContext, context);
-  const BUILDER_PUBLIC_API_KEY = 'f1a790f8c3204b3b8c5c1795aeac4660'; // ggignore
-  const contentRsrc = useResource$<any>(() => {
-    const url = new URL(props.url);
-    return getContent({
-      model: 'page',
-      apiKey: BUILDER_PUBLIC_API_KEY,
-      userAttributes: {
-        urlPath: url.pathname || '/',
-      },
-    });
-  });
-
-  return (
-    <Host>
-      <Resource
-        resource={contentRsrc}
-        onPending={() => <div>Loading...</div>}
-        onResolved={(content) => {
-          return (
-            <RenderContent
-              model="page"
-              content={content}
-              apiKey={BUILDER_PUBLIC_API_KEY}
-            />
-          );
-        }}
-      />
-    </Host>
-  );
-});
-```
-
-## Testing Pages for SDK
-
-1. Open https://builder.io/spaces
-2. Open https://builder.io/content/037948e52eaf4743afed464f02c70da4 to see the content.
-3. Editing content should work with the SDK. (to be fixed)
-4. To navigate to the workspace cmnd-p: `org f1a790f8c3204b3b8c5c1795aeac4660`

package/src/blocks/button/button.jsx

@@ -1,27 +0,0 @@
-// GENERATED BY MITOSIS
-
-import { Fragment, component$, h, useStylesScoped$ } from "@builder.io/qwik";
-export const Button = component$((props) => {
-  useStylesScoped$(STYLES);
-  return (
-    <Fragment>
-      {props.link ? (
-        <a
-          role="button"
-          {...props.attributes}
-          href={props.link}
-          target={props.openLinkInNewTab ? "_blank" : undefined}
-        >
-          {props.text}
-        </a>
-      ) : (
-        <button class="button-Button" {...props.attributes}>
-          {props.text}
-        </button>
-      )}
-    </Fragment>
-  );
-});
-export default Button;
-export const STYLES = `.button-Button { 
-all: unset; }`;

package/src/blocks/button/component-info.js

@@ -1,41 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  builtIn: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

package/src/blocks/columns/columns.jsx

@@ -1,102 +0,0 @@
-// GENERATED BY MITOSIS
-
-import RenderBlocks from "../../components/render-blocks";
-import { markMutable } from "../../functions/mark-mutable";
-import { Fragment, component$, h, useStylesScoped$ } from "@builder.io/qwik";
-export const getGutterSize = function getGutterSize(props, state) {
-  return typeof props.space === "number" ? props.space || 0 : 20;
-};
-export const getColumns = function getColumns(props, state) {
-  return props.columns || [];
-};
-export const getWidth = function getWidth(props, state, index) {
-  const columns = getColumns(props, state);
-  return columns[index]?.width || 100 / columns.length;
-};
-export const getColumnCssWidth = function getColumnCssWidth(
-  props,
-  state,
-  index
-) {
-  const columns = getColumns(props, state);
-  const gutterSize = getGutterSize(props, state);
-  const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
-};
-export const maybeApplyForTablet = function maybeApplyForTablet(
-  props,
-  state,
-  prop
-) {
-  const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
-  return _stackColumnsAt === "tablet" ? prop : "inherit";
-};
-export const columnsCssVars = function columnsCssVars(props, state) {
-  const flexDir =
-    props.stackColumnsAt === "never"
-      ? "inherit"
-      : props.reverseColumnsWhenStacked
-      ? "column-reverse"
-      : "column";
-  return {
-    "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir),
-  };
-};
-export const columnCssVars = function columnCssVars(props, state) {
-  const width = "100%";
-  const marginLeft = "0";
-  return {
-    "--column-width": width,
-    "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(
-      props,
-      state,
-      marginLeft
-    ),
-  };
-};
-export const Columns = component$((props) => {
-  useStylesScoped$(STYLES);
-  const state = {};
-  return (
-    <div
-      class="builder-columns div-Columns"
-      style={columnsCssVars(props, state)}
-    >
-      {(props.columns || []).map((column, index) => {
-        return (
-          <div
-            class="builder-column div-Columns-2"
-            style={{
-              width: getColumnCssWidth(props, state, index),
-              marginLeft: `${index === 0 ? 0 : getGutterSize(props, state)}px`,
-              ...columnCssVars(props, state),
-            }}
-            key={index}
-          >
-            <RenderBlocks
-              blocks={markMutable(column.blocks)}
-              path={`component.options.columns.${index}.blocks`}
-              parent={props.builderBlock.id}
-            ></RenderBlocks>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
-export default Columns;
-export const STYLES = `.div-Columns { 
-display: flex;
-align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .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: 991px) { .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; } }`;