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

package/vue2/node_modules/vue/src/v3/reactivity/ref.ts

@@ -0,0 +1,296 @@
+import { defineReactive } from 'core/observer/index'
+import {
+  isReactive,
+  ReactiveFlags,
+  type ShallowReactiveMarker
+} from './reactive'
+import type { IfAny } from 'types/utils'
+import Dep from 'core/observer/dep'
+import { warn, isArray, def, isServerRendering } from 'core/util'
+import { TrackOpTypes, TriggerOpTypes } from './operations'
+
+declare const RefSymbol: unique symbol
+export declare const RawSymbol: unique symbol
+
+/**
+ * @internal
+ */
+export const RefFlag = `__v_isRef`
+
+export interface Ref<T = any> {
+  value: T
+  /**
+   * Type differentiator only.
+   * We need this to be in public d.ts but don't want it to show up in IDE
+   * autocomplete, so we use a private Symbol instead.
+   */
+  [RefSymbol]: true
+  /**
+   * @internal
+   */
+  dep?: Dep
+  /**
+   * @internal
+   */
+  [RefFlag]: true
+}
+
+export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
+export function isRef(r: any): r is Ref {
+  return !!(r && (r as Ref).__v_isRef === true)
+}
+
+export function ref<T extends object>(
+  value: T
+): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>
+export function ref<T>(value: T): Ref<UnwrapRef<T>>
+export function ref<T = any>(): Ref<T | undefined>
+export function ref(value?: unknown) {
+  return createRef(value, false)
+}
+
+declare const ShallowRefMarker: unique symbol
+
+export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
+
+export function shallowRef<T extends object>(
+  value: T
+): T extends Ref ? T : ShallowRef<T>
+export function shallowRef<T>(value: T): ShallowRef<T>
+export function shallowRef<T = any>(): ShallowRef<T | undefined>
+export function shallowRef(value?: unknown) {
+  return createRef(value, true)
+}
+
+function createRef(rawValue: unknown, shallow: boolean) {
+  if (isRef(rawValue)) {
+    return rawValue
+  }
+  const ref: any = {}
+  def(ref, RefFlag, true)
+  def(ref, ReactiveFlags.IS_SHALLOW, shallow)
+  def(
+    ref,
+    'dep',
+    defineReactive(ref, 'value', rawValue, null, shallow, isServerRendering())
+  )
+  return ref
+}
+
+export function triggerRef(ref: Ref) {
+  if (__DEV__ && !ref.dep) {
+    warn(`received object is not a triggerable ref.`)
+  }
+  if (__DEV__) {
+    ref.dep &&
+      ref.dep.notify({
+        type: TriggerOpTypes.SET,
+        target: ref,
+        key: 'value'
+      })
+  } else {
+    ref.dep && ref.dep.notify()
+  }
+}
+
+export function unref<T>(ref: T | Ref<T>): T {
+  return isRef(ref) ? (ref.value as any) : ref
+}
+
+export function proxyRefs<T extends object>(
+  objectWithRefs: T
+): ShallowUnwrapRef<T> {
+  if (isReactive(objectWithRefs)) {
+    return objectWithRefs as any
+  }
+  const proxy = {}
+  const keys = Object.keys(objectWithRefs)
+  for (let i = 0; i < keys.length; i++) {
+    proxyWithRefUnwrap(proxy, objectWithRefs, keys[i])
+  }
+  return proxy as any
+}
+
+export function proxyWithRefUnwrap(
+  target: any,
+  source: Record<string, any>,
+  key: string
+) {
+  Object.defineProperty(target, key, {
+    enumerable: true,
+    configurable: true,
+    get: () => {
+      const val = source[key]
+      if (isRef(val)) {
+        return val.value
+      } else {
+        const ob = val && val.__ob__
+        if (ob) ob.dep.depend()
+        return val
+      }
+    },
+    set: value => {
+      const oldValue = source[key]
+      if (isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value
+      } else {
+        source[key] = value
+      }
+    }
+  })
+}
+
+export type CustomRefFactory<T> = (
+  track: () => void,
+  trigger: () => void
+) => {
+  get: () => T
+  set: (value: T) => void
+}
+
+export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
+  const dep = new Dep()
+  const { get, set } = factory(
+    () => {
+      if (__DEV__) {
+        dep.depend({
+          target: ref,
+          type: TrackOpTypes.GET,
+          key: 'value'
+        })
+      } else {
+        dep.depend()
+      }
+    },
+    () => {
+      if (__DEV__) {
+        dep.notify({
+          target: ref,
+          type: TriggerOpTypes.SET,
+          key: 'value'
+        })
+      } else {
+        dep.notify()
+      }
+    }
+  )
+  const ref = {
+    get value() {
+      return get()
+    },
+    set value(newVal) {
+      set(newVal)
+    }
+  } as any
+  def(ref, RefFlag, true)
+  return ref
+}
+
+export type ToRefs<T = any> = {
+  [K in keyof T]: ToRef<T[K]>
+}
+
+export function toRefs<T extends object>(object: T): ToRefs<T> {
+  if (__DEV__ && !isReactive(object)) {
+    warn(`toRefs() expects a reactive object but received a plain one.`)
+  }
+  const ret: any = isArray(object) ? new Array(object.length) : {}
+  for (const key in object) {
+    ret[key] = toRef(object, key)
+  }
+  return ret
+}
+
+export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>
+
+export function toRef<T extends object, K extends keyof T>(
+  object: T,
+  key: K
+): ToRef<T[K]>
+
+export function toRef<T extends object, K extends keyof T>(
+  object: T,
+  key: K,
+  defaultValue: T[K]
+): ToRef<Exclude<T[K], undefined>>
+
+export function toRef<T extends object, K extends keyof T>(
+  object: T,
+  key: K,
+  defaultValue?: T[K]
+): ToRef<T[K]> {
+  const val = object[key]
+  if (isRef(val)) {
+    return val as any
+  }
+  const ref = {
+    get value() {
+      const val = object[key]
+      return val === undefined ? (defaultValue as T[K]) : val
+    },
+    set value(newVal) {
+      object[key] = newVal
+    }
+  } as any
+  def(ref, RefFlag, true)
+  return ref
+}
+
+/**
+ * This is a special exported interface for other packages to declare
+ * additional types that should bail out for ref unwrapping. For example
+ * \@vue/runtime-dom can declare it like so in its d.ts:
+ *
+ * ``` ts
+ * declare module 'vue' {
+ *   export interface RefUnwrapBailTypes {
+ *     runtimeDOMBailTypes: Node | Window
+ *   }
+ * }
+ * ```
+ *
+ * Note that api-extractor somehow refuses to include `declare module`
+ * augmentations in its generated d.ts, so we have to manually append them
+ * to the final generated d.ts in our build process.
+ */
+export interface RefUnwrapBailTypes {
+  runtimeDOMBailTypes: Node | Window
+}
+
+export type ShallowUnwrapRef<T> = {
+  [K in keyof T]: T[K] extends Ref<infer V>
+    ? V
+    : // if `V` is `unknown` that means it does not extend `Ref` and is undefined
+    T[K] extends Ref<infer V> | undefined
+    ? unknown extends V
+      ? undefined
+      : V | undefined
+    : T[K]
+}
+
+export type UnwrapRef<T> = T extends ShallowRef<infer V>
+  ? V
+  : T extends Ref<infer V>
+  ? UnwrapRefSimple<V>
+  : UnwrapRefSimple<T>
+
+type BaseTypes = string | number | boolean
+type CollectionTypes = IterableCollections | WeakCollections
+type IterableCollections = Map<any, any> | Set<any>
+type WeakCollections = WeakMap<any, any> | WeakSet<any>
+
+export type UnwrapRefSimple<T> = T extends
+  | Function
+  | CollectionTypes
+  | BaseTypes
+  | Ref
+  | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
+  | { [RawSymbol]?: true }
+  ? T
+  : T extends Array<any>
+  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
+  : T extends object & { [ShallowReactiveMarker]?: never }
+  ? {
+      [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>
+    }
+  : T

package/vue2/node_modules/vue/src/v3/sfc-helpers/useCssModule.ts

@@ -0,0 +1,24 @@
+import { emptyObject, warn } from '../../core/util'
+import { currentInstance } from '../currentInstance'
+
+export function useCssModule(name = '$style'): Record<string, string> {
+  /* istanbul ignore else */
+  if (!__GLOBAL__) {
+    if (!currentInstance) {
+      __DEV__ && warn(`useCssModule must be called inside setup()`)
+      return emptyObject
+    }
+    const mod = currentInstance[name]
+    if (!mod) {
+      __DEV__ &&
+        warn(`Current instance does not have CSS module named "${name}".`)
+      return emptyObject
+    }
+    return mod as Record<string, string>
+  } else {
+    if (__DEV__) {
+      warn(`useCssModule() is not supported in the global build.`)
+    }
+    return emptyObject
+  }
+}

package/vue2/node_modules/vue/src/v3/sfc-helpers/useCssVars.ts

@@ -0,0 +1,34 @@
+import { watchPostEffect } from '../'
+import { inBrowser, warn } from 'core/util'
+import { currentInstance } from '../currentInstance'
+
+/**
+ * Runtime helper for SFC's CSS variable injection feature.
+ * @private
+ */
+export function useCssVars(
+  getter: (
+    vm: Record<string, any>,
+    setupProxy: Record<string, any>
+  ) => Record<string, string>
+) {
+  if (!inBrowser && !__TEST__) return
+
+  const instance = currentInstance
+  if (!instance) {
+    __DEV__ &&
+      warn(`useCssVars is called without current active component instance.`)
+    return
+  }
+
+  watchPostEffect(() => {
+    const el = instance.$el
+    const vars = getter(instance, instance._setupProxy!)
+    if (el && el.nodeType === 1) {
+      const style = (el as HTMLElement).style
+      for (const key in vars) {
+        style.setProperty(`--${key}`, vars[key])
+      }
+    }
+  })
+}

package/vue2/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@builder.io/sdk-vue-2",
+  "type": "module",
+  "main": "./lib/node/index.cjs",
+  "module": "./lib/node/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "nx run-many -p @builder.io/sdk-vue-2 -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.45",
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vue/tsconfig": "^0.1.3",
+    "npm-run-all": "^4.1.5",
+    "nx": "^16.6.0",
+    "nx-cloud": "^16.2.0",
+    "terser": "^5.14.2",
+    "typescript": "^5.1.6",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.5.2",
+    "vue": "^2.7.7",
+    "vue-tsc": "^0.38.8"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.7"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build:vue2",
+          "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/lib",
+          "{projectRoot}/types"
+        ]
+      }
+    }
+  }
+}

package/vue2/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/vue2/src/blocks/button/button.vue

@@ -0,0 +1,68 @@
+<template>
+  <a
+    role="button"
+    v-if="link"
+    :href="link"
+    :target="openLinkInNewTab ? '_blank' : undefined"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    {{ text }}
+  </a>
+  <button
+    v-else
+    :style="attributes.style"
+    :class="_classStringToObject(attributes.class + ' button-2fnk003dqad')"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    {{ text }}
+  </button>
+</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-2fnk003dqad {
+  all: unset;
+}
+</style>

package/vue2/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
+}