@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue3/node_modules/vue-tsc/bin/vue-tsc.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+const fs = require('fs');
+
+const readFileSync = fs.readFileSync;
+const tscPath = require.resolve('typescript/lib/tsc');
+const proxyPath = require.resolve('../out/proxy');
+
+fs.readFileSync = (...args) => {
+    if (args[0] === tscPath) {
+        let tsc = readFileSync(...args);
+
+        // add *.vue files to allow extensions
+        tsc = tsc.replace(
+            `ts.supportedTSExtensions = [[".ts", ".tsx", ".d.ts"], [".cts", ".d.cts"], [".mts", ".d.mts"]];`,
+            `ts.supportedTSExtensions = [[".ts", ".tsx", ".d.ts"], [".cts", ".d.cts"], [".mts", ".d.mts"], [".vue", ".md", ".html"]];`,
+        );
+        tsc = tsc.replace(
+            `ts.supportedJSExtensions = [[".js", ".jsx"], [".mjs"], [".cjs"]];`,
+            `ts.supportedJSExtensions = [[".js", ".jsx"], [".mjs"], [".cjs"], [".vue", ".md", ".html"]];`,
+        );
+        tsc = tsc.replace(
+            `var allSupportedExtensions = [[".ts", ".tsx", ".d.ts", ".js", ".jsx"], [".cts", ".d.cts", ".cjs"], [".mts", ".d.mts", ".mjs"]];`,
+            `var allSupportedExtensions = [[".ts", ".tsx", ".d.ts", ".js", ".jsx"], [".cts", ".d.cts", ".cjs"], [".mts", ".d.mts", ".mjs"], [".vue", ".md", ".html"]];`,
+        );
+
+        // proxy createProgram apis
+        tsc = tsc.replace(
+            `function createProgram(rootNamesOrOptions, _options, _host, _oldProgram, _configFileParsingDiagnostics) {`,
+            `function createProgram(rootNamesOrOptions, _options, _host, _oldProgram, _configFileParsingDiagnostics) { return require(${JSON.stringify(proxyPath)}).createProgramProxy(...arguments);`,
+        );
+
+        // proxy tracing
+        tsc = tsc.replace(
+            `ts.startTracing = tracingEnabled.startTracing;`,
+            `ts.startTracing = require(${JSON.stringify(proxyPath)}).loadTsLib().startTracing;`,
+        );
+
+        tsc = tsc.replace(
+            `ts.dumpTracingLegend = tracingEnabled.dumpLegend;`,
+            `ts.dumpTracingLegend = require(${JSON.stringify(proxyPath)}).loadTsLib().dumpTracingLegend;`,
+        );
+
+        return tsc;
+    }
+    return readFileSync(...args);
+};
+
+require(tscPath);

package/vue3/node_modules/vue-tsc/out/proxy.d.ts

@@ -0,0 +1,4 @@
+import * as ts from 'typescript/lib/tsserverlibrary';
+export declare function createProgramProxy(options: ts.CreateProgramOptions, // rootNamesOrOptions: readonly string[] | CreateProgramOptions,
+_options?: ts.CompilerOptions, _host?: ts.CompilerHost, _oldProgram?: ts.Program, _configFileParsingDiagnostics?: readonly ts.Diagnostic[]): any;
+export declare function loadTsLib(): typeof ts;

package/vue3/node_modules/vue-tsc/out/proxy.js

@@ -0,0 +1,110 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTsLib = exports.createProgramProxy = void 0;
+const ts = require("typescript/lib/tsserverlibrary");
+const vue = require("@volar/vue-language-core");
+const vueTs = require("@volar/vue-typescript");
+function createProgramProxy(options, // rootNamesOrOptions: readonly string[] | CreateProgramOptions,
+_options, _host, _oldProgram, _configFileParsingDiagnostics) {
+    if (!options.options.noEmit && !options.options.emitDeclarationOnly)
+        return doThrow('js emit is not support');
+    if (!options.host)
+        return doThrow('!options.host');
+    let program = options.oldProgram;
+    if (!program) {
+        const ctx = {
+            projectVersion: 0,
+            options: options,
+        };
+        const vueCompilerOptions = getVueCompilerOptions();
+        const scripts = new Map();
+        const vueLsHost = new Proxy({
+            resolveModuleNames: undefined,
+            writeFile: (fileName, content) => {
+                if (fileName.indexOf('__VLS_') === -1) {
+                    ctx.options.host.writeFile(fileName, content, false);
+                }
+            },
+            getCompilationSettings: () => ctx.options.options,
+            getVueCompilationSettings: () => vueCompilerOptions,
+            getScriptFileNames: () => {
+                return ctx.options.rootNames;
+            },
+            getScriptVersion,
+            getScriptSnapshot,
+            getProjectVersion: () => {
+                return ctx.projectVersion.toString();
+            },
+            getProjectReferences: () => ctx.options.projectReferences,
+            getTypeScriptModule: () => ts,
+            isTsc: true,
+        }, {
+            get: (target, property) => {
+                if (property in target) {
+                    return target[property];
+                }
+                return ctx.options.host[property];
+            },
+        });
+        const vueTsLs = vueTs.createLanguageService(vueLsHost);
+        program = vueTsLs.getProgram();
+        program.__VLS_ctx = ctx;
+        function getVueCompilerOptions() {
+            const tsConfig = ctx.options.options.configFilePath;
+            if (typeof tsConfig === 'string') {
+                return vue.tsShared.createParsedCommandLine(ts, ts.sys, tsConfig).vueOptions;
+            }
+            return {};
+        }
+        function getScriptVersion(fileName) {
+            var _a, _b;
+            return (_b = (_a = getScript(fileName)) === null || _a === void 0 ? void 0 : _a.version) !== null && _b !== void 0 ? _b : '';
+        }
+        function getScriptSnapshot(fileName) {
+            var _a;
+            return (_a = getScript(fileName)) === null || _a === void 0 ? void 0 : _a.scriptSnapshot;
+        }
+        function getScript(fileName) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const script = scripts.get(fileName);
+            if ((script === null || script === void 0 ? void 0 : script.projectVersion) === ctx.projectVersion) {
+                return script;
+            }
+            const modifiedTime = (_d = (_c = (_b = (_a = ts.sys).getModifiedTime) === null || _b === void 0 ? void 0 : _b.call(_a, fileName)) === null || _c === void 0 ? void 0 : _c.valueOf()) !== null && _d !== void 0 ? _d : 0;
+            if ((script === null || script === void 0 ? void 0 : script.modifiedTime) === modifiedTime) {
+                return script;
+            }
+            if (ctx.options.host.fileExists(fileName)) {
+                const fileContent = ctx.options.host.readFile(fileName);
+                if (fileContent !== undefined) {
+                    const script = {
+                        projectVersion: ctx.projectVersion,
+                        modifiedTime,
+                        scriptSnapshot: ts.ScriptSnapshot.fromString(fileContent),
+                        version: (_g = (_f = (_e = ctx.options.host).createHash) === null || _f === void 0 ? void 0 : _f.call(_e, fileContent)) !== null && _g !== void 0 ? _g : fileContent,
+                    };
+                    scripts.set(fileName, script);
+                    return script;
+                }
+            }
+        }
+    }
+    else {
+        program.__VLS_ctx.options = options;
+        program.__VLS_ctx.projectVersion++;
+    }
+    for (const rootName of options.rootNames) {
+        // register file watchers
+        options.host.getSourceFile(rootName, ts.ScriptTarget.ESNext);
+    }
+    return program;
+}
+exports.createProgramProxy = createProgramProxy;
+function loadTsLib() {
+    return ts;
+}
+exports.loadTsLib = loadTsLib;
+function doThrow(msg) {
+    console.error(msg);
+    throw msg;
+}
+//# sourceMappingURL=proxy.js.map

package/vue3/node_modules/vue-tsc/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "vue-tsc",
+	"version": "0.39.5",
+	"license": "MIT",
+	"files": [
+		"bin",
+		"out/**/*.js",
+		"out/**/*.d.ts"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/johnsoncodehk/volar.git",
+		"directory": "packages/vue-tsc"
+	},
+	"bin": {
+		"vue-tsc": "./bin/vue-tsc.js"
+	},
+	"dependencies": {
+		"@volar/vue-language-core": "0.39.5",
+		"@volar/vue-typescript": "0.39.5"
+	},
+	"peerDependencies": {
+		"typescript": "*"
+	},
+	"gitHead": "b2efb244b43f24b3e351c72e731f31090e51a736"
+}

package/vue3/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@builder.io/sdk-vue-3",
+  "type": "module",
+  "main": "./lib/node/index.cjs",
+  "module": "./lib/node/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "nx run-many -p @builder.io/sdk-vue-3 -t build:node build:edge build:browser",
+    "vite-build": "vite build --mode lib",
+    "build:node": "SDK_ENV=node yarn vite-build",
+    "build:edge": "SDK_ENV=edge yarn vite-build",
+    "build:browser": "SDK_ENV=browser yarn vite-build",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "devDependencies": {
+    "@builder.io/sdks": "workspace:*",
+    "@types/node": "^16.11.47",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vue/tsconfig": "^0.1.3",
+    "npm-run-all": "^4.1.5",
+    "nx": "^16.6.0",
+    "nx-cloud": "^16.2.0",
+    "typescript": "^5.1.6",
+    "vite": "^3.0.4",
+    "vite-plugin-dts": "^3.5.2",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.39.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build:vue3",
+          "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/lib",
+          "{projectRoot}/types"
+        ]
+      }
+    }
+  }
+}

package/vue3/src/blocks/BaseText.vue

@@ -0,0 +1,25 @@
+<template>
+  <span :style="builderContext.inheritedStyles">
+    {{ text }}
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import BuilderContext from "../context/builder.context.js";
+
+export interface BaseTextProps {
+  text: string;
+}
+
+export default defineComponent({
+  name: "builder-base-text",
+
+  props: ["text"],
+
+  inject: {
+    builderContext: BuilderContext.key,
+  },
+});
+</script>

package/vue3/src/blocks/button/button.vue

@@ -0,0 +1,71 @@
+<template>
+  <template v-if="link">
+    <a
+      role="button"
+      :href="link"
+      :target="openLinkInNewTab ? '_blank' : undefined"
+      v-bind="filterAttrs(attributes, 'v-on:', false)"
+      v-on="filterAttrs(attributes, 'v-on:', true)"
+    >
+      {{ text }}
+    </a>
+  </template>
+
+  <template v-else>
+    <button
+      :style="attributes.style"
+      :class="_classStringToObject(attributes.class + ' button-21azgz5avex')"
+      v-bind="filterAttrs(attributes, 'v-on:', false)"
+      v-on="filterAttrs(attributes, 'v-on:', true)"
+    >
+      {{ text }}
+    </button>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-button",
+
+  props: ["attributes", "text", "link", "openLinkInNewTab"],
+
+  data() {
+    return { filterAttrs };
+  },
+
+  methods: {
+    _classStringToObject(str: string) {
+      const obj: Record<string, boolean> = {};
+      if (typeof str !== "string") {
+        return obj;
+      }
+      const classNames = str.trim().split(/\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.button-21azgz5avex {
+  all: unset;
+}
+</style>

package/vue3/src/blocks/button/component-info.ts

@@ -0,0 +1,35 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Core:Button',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    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
+}

package/vue3/src/blocks/columns/columns.vue

@@ -0,0 +1,220 @@
+<template>
+  <div
+    :class="
+      _classStringToObject(
+        `builder-columns ${builderBlock.id}-breakpoints` + ' div-16nol0lwi20'
+      )
+    "
+    :style="columnsCssVars"
+    v-bind="{}"
+  >
+    <template v-if="TARGET !== 'reactNative'">
+      <inlined-styles :styles="columnsStyles"></inlined-styles>
+    </template>
+
+    <template :key="index" v-for="(column, index) in columns">
+      <div
+        class="builder-column div-16nol0lwi20-2"
+        :style="columnCssVars(index)"
+        v-bind="{}"
+      >
+        <blocks
+          :path="`component.options.columns.${index}.blocks`"
+          :parent="builderBlock.id"
+          :styleProp="{
+            flexGrow: '1',
+          }"
+          :context="builderContext"
+          :registeredComponents="builderComponents"
+          :blocks="column.blocks"
+        ></blocks>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import Blocks from "../../components/blocks/blocks.vue";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import type { SizeName } from "../../constants/device-sizes.js";
+import InlinedStyles from "../../components/inlined-styles.vue";
+import { TARGET } from "../../constants/target.js";
+import type { Dictionary } from "../../types/typescript.js";
+import type {
+  BuilderComponentsProp,
+  PropsWithBuilderData,
+} from "../../types/builder-props.js";
+import { deoptSignal } from "../../functions/deopt.js";
+
+type Column = {
+  blocks: BuilderBlock[];
+  width?: number;
+};
+type CSSVal = string | number;
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+  columns?: Column[];
+  builderBlock: BuilderBlock;
+  space?: number;
+  stackColumnsAt?: StackColumnsAt;
+  reverseColumnsWhenStacked?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-columns",
+  components: { InlinedStyles: InlinedStyles, Blocks: Blocks },
+  props: [
+    "js",
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderContext",
+    "builderBlock",
+    "builderComponents",
+  ],
+
+  data() {
+    return {
+      gutterSize: typeof this.space === "number" ? this.space || 0 : 20,
+      cols: this.columns || [],
+      stackAt: this.stackColumnsAt || "tablet",
+      flexDir:
+        this.stackColumnsAt === "never"
+          ? "row"
+          : this.reverseColumnsWhenStacked
+          ? "column-reverse"
+          : "column",
+      TARGET,
+    };
+  },
+
+  computed: {
+    columnsCssVars() {
+      return {
+        "--flex-dir": this.flexDir,
+        "--flex-dir-tablet": this.getTabletStyle({
+          stackedStyle: this.flexDir,
+          desktopStyle: "row",
+        }),
+      } as Dictionary<string>;
+    },
+    columnsStyles() {
+      return `
+        @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+    },
+  },
+
+  methods: {
+    getWidth(index: number) {
+      return this.cols[index]?.width || 100 / this.cols.length;
+    },
+    getColumnCssWidth(index: number) {
+      const subtractWidth =
+        (this.gutterSize * (this.cols.length - 1)) / this.cols.length;
+      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    },
+    getTabletStyle({
+      stackedStyle,
+      desktopStyle,
+    }: {
+      stackedStyle: CSSVal;
+      desktopStyle: CSSVal;
+    }) {
+      return this.stackAt === "tablet" ? stackedStyle : desktopStyle;
+    },
+    getMobileStyle({
+      stackedStyle,
+      desktopStyle,
+    }: {
+      stackedStyle: CSSVal;
+      desktopStyle: CSSVal;
+    }) {
+      return this.stackAt === "never" ? desktopStyle : stackedStyle;
+    },
+    columnCssVars(index: number) {
+      const gutter = index === 0 ? 0 : this.gutterSize;
+      const width = this.getColumnCssWidth(index);
+      const gutterPixels = `${gutter}px`;
+      const mobileWidth = "100%";
+      const mobileMarginLeft = 0;
+      const marginLeftKey = "margin-left";
+      return {
+        width,
+        [marginLeftKey]: gutterPixels,
+        "--column-width-mobile": this.getMobileStyle({
+          stackedStyle: mobileWidth,
+          desktopStyle: width,
+        }),
+        "--column-margin-left-mobile": this.getMobileStyle({
+          stackedStyle: mobileMarginLeft,
+          desktopStyle: gutterPixels,
+        }),
+        "--column-width-tablet": this.getTabletStyle({
+          stackedStyle: mobileWidth,
+          desktopStyle: width,
+        }),
+        "--column-margin-left-tablet": this.getTabletStyle({
+          stackedStyle: mobileMarginLeft,
+          desktopStyle: gutterPixels,
+        }),
+      } as Dictionary<string>;
+    },
+    getWidthForBreakpointSize(size: SizeName) {
+      const breakpointSizes = getSizesForBreakpoints(
+        this.builderContext.content?.meta?.breakpoints || {}
+      );
+      return breakpointSizes[size].max;
+    },
+    _classStringToObject(str: string) {
+      const obj: Record<string, boolean> = {};
+      if (typeof str !== "string") {
+        return obj;
+      }
+      const classNames = str.trim().split(/\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.div-16nol0lwi20 {
+  display: flex;
+  line-height: normal;
+}
+.div-16nol0lwi20-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>