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

package/vue2/node_modules/vue/packages/compiler-sfc/test/stylePluginScoped.spec.ts

@@ -0,0 +1,137 @@
+import { compileStyle } from '../src/compileStyle'
+
+// vue-loader/#1370
+test('spaces after selector', () => {
+  const { code } = compileStyle({
+    source: `.foo , .bar { color: red; }`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(`.foo[test], .bar[test] { color: red;`)
+})
+
+test('leading deep selector', () => {
+  const { code } = compileStyle({
+    source: `>>> .foo { color: red; }`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(`[test] .foo { color: red;`)
+})
+
+test('scoped css', () => {
+  const { code: style } = compileStyle({
+    id: 'v-scope-xxx',
+    scoped: true,
+    filename: 'example.vue',
+    source: `
+.test {
+  color: yellow;
+}
+.test:after {
+  content: 'bye!';
+}
+h1 {
+  color: green;
+}
+.anim {
+  animation: color 5s infinite, other 5s;
+}
+.anim-2 {
+  animation-name: color;
+  animation-duration: 5s;
+}
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
+.anim-multiple {
+  animation: color 5s infinite, opacity 2s;
+}
+.anim-multiple-2 {
+  animation-name: color, opacity;
+  animation-duration: 5s, 2s;
+}
+
+@keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@-webkit-keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.foo p >>> .bar {
+  color: red;
+}
+.foo div /deep/ .bar {
+  color: red;
+}
+
+.foo span ::v-deep .bar {
+  color: red;
+}
+`
+  })
+
+  expect(style).toContain(`.test[v-scope-xxx] {\n  color: yellow;\n}`)
+  expect(style).toContain(`.test[v-scope-xxx]:after {\n  content: \'bye!\';\n}`)
+  expect(style).toContain(`h1[v-scope-xxx] {\n  color: green;\n}`)
+  // scoped keyframes
+  expect(style).toContain(
+    `.anim[v-scope-xxx] {\n  animation: color-v-scope-xxx 5s infinite, other 5s;`
+  )
+  expect(style).toContain(
+    `.anim-2[v-scope-xxx] {\n  animation-name: color-v-scope-xxx`
+  )
+  expect(style).toContain(
+    `.anim-3[v-scope-xxx] {\n  animation: 5s color-v-scope-xxx infinite, 5s other;`
+  )
+  expect(style).toContain(`@keyframes color-v-scope-xxx {`)
+  expect(style).toContain(`@-webkit-keyframes color-v-scope-xxx {`)
+
+  expect(style).toContain(
+    `.anim-multiple[v-scope-xxx] {\n  animation: color-v-scope-xxx 5s infinite,opacity-v-scope-xxx 2s;`
+  )
+  expect(style).toContain(
+    `.anim-multiple-2[v-scope-xxx] {\n  animation-name: color-v-scope-xxx,opacity-v-scope-xxx;`
+  )
+  expect(style).toContain(`@keyframes opacity-v-scope-xxx {`)
+  expect(style).toContain(`@-webkit-keyframes opacity-v-scope-xxx {`)
+  // >>> combinator
+  expect(style).toContain(`.foo p[v-scope-xxx] .bar {\n  color: red;\n}`)
+  // /deep/ alias for >>>
+  expect(style).toContain(`.foo div[v-scope-xxx] .bar {\n  color: red;\n}`)
+  // ::-v-deep alias for >>>
+  expect(style).toContain(`.foo span[v-scope-xxx] .bar {\n  color: red;\n}`)
+})
+
+test('pseudo element', () => {
+  const { code } = compileStyle({
+    source: '::selection { display: none; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('[test]::selection {')
+})
+
+test('spaces before pseudo element', () => {
+  const { code } = compileStyle({
+    source: '.abc, ::selection { color: red; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('.abc[test],')
+  expect(code).toContain('[test]::selection {')
+})

package/vue2/node_modules/vue/packages/compiler-sfc/test/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "vitest/globals"]
+  },
+  "include": ["../src", "."]
+}

package/vue2/node_modules/vue/packages/compiler-sfc/test/util.ts

@@ -0,0 +1,35 @@
+import {
+  parse,
+  compileScript,
+  type SFCParseOptions,
+  type SFCScriptCompileOptions
+} from '../src'
+import { parse as babelParse } from '@babel/parser'
+
+export const mockId = 'xxxxxxxx'
+
+export function compile(
+  source: string,
+  options?: Partial<SFCScriptCompileOptions>,
+  parseOptions?: Partial<SFCParseOptions>
+) {
+  const sfc = parse({
+    ...parseOptions,
+    source
+  })
+  return compileScript(sfc, { id: mockId, ...options })
+}
+
+export function assertCode(code: string) {
+  // parse the generated code to make sure it is valid
+  try {
+    babelParse(code, {
+      sourceType: 'module',
+      plugins: ['typescript']
+    })
+  } catch (e: any) {
+    console.log(code)
+    throw e
+  }
+  expect(code).toMatchSnapshot()
+}

package/vue2/node_modules/vue/src/compiler/codeframe.ts

@@ -0,0 +1,52 @@
+const range = 2
+
+export function generateCodeFrame(
+  source: string,
+  start: number = 0,
+  end: number = source.length
+): string {
+  const lines = source.split(/\r?\n/)
+  let count = 0
+  const res: string[] = []
+  for (let i = 0; i < lines.length; i++) {
+    count += lines[i].length + 1
+    if (count >= start) {
+      for (let j = i - range; j <= i + range || end > count; j++) {
+        if (j < 0 || j >= lines.length) continue
+        res.push(
+          `${j + 1}${repeat(` `, 3 - String(j + 1).length)}|  ${lines[j]}`
+        )
+        const lineLength = lines[j].length
+        if (j === i) {
+          // push underline
+          const pad = start - (count - lineLength) + 1
+          const length = end > count ? lineLength - pad : end - start
+          res.push(`   |  ` + repeat(` `, pad) + repeat(`^`, length))
+        } else if (j > i) {
+          if (end > count) {
+            const length = Math.min(end - count, lineLength)
+            res.push(`   |  ` + repeat(`^`, length))
+          }
+          count += lineLength + 1
+        }
+      }
+      break
+    }
+  }
+  return res.join('\n')
+}
+
+function repeat(str: string, n: number) {
+  let result = ''
+  if (n > 0) {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      // eslint-disable-line
+      if (n & 1) result += str
+      n >>>= 1
+      if (n <= 0) break
+      str += str
+    }
+  }
+  return result
+}

package/vue2/node_modules/vue/src/compiler/codegen/events.ts

@@ -0,0 +1,170 @@
+import { ASTElementHandler, ASTElementHandlers } from 'types/compiler'
+
+const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/
+const fnInvokeRE = /\([^)]*?\);*$/
+const simplePathRE =
+  /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
+
+// KeyboardEvent.keyCode aliases
+const keyCodes: { [key: string]: number | Array<number> } = {
+  esc: 27,
+  tab: 9,
+  enter: 13,
+  space: 32,
+  up: 38,
+  left: 37,
+  right: 39,
+  down: 40,
+  delete: [8, 46]
+}
+
+// KeyboardEvent.key aliases
+const keyNames: { [key: string]: string | Array<string> } = {
+  // #7880: IE11 and Edge use `Esc` for Escape key name.
+  esc: ['Esc', 'Escape'],
+  tab: 'Tab',
+  enter: 'Enter',
+  // #9112: IE11 uses `Spacebar` for Space key name.
+  space: [' ', 'Spacebar'],
+  // #7806: IE11 uses key names without `Arrow` prefix for arrow keys.
+  up: ['Up', 'ArrowUp'],
+  left: ['Left', 'ArrowLeft'],
+  right: ['Right', 'ArrowRight'],
+  down: ['Down', 'ArrowDown'],
+  // #9112: IE11 uses `Del` for Delete key name.
+  delete: ['Backspace', 'Delete', 'Del']
+}
+
+// #4868: modifiers that prevent the execution of the listener
+// need to explicitly return null so that we can determine whether to remove
+// the listener for .once
+const genGuard = condition => `if(${condition})return null;`
+
+const modifierCode: { [key: string]: string } = {
+  stop: '$event.stopPropagation();',
+  prevent: '$event.preventDefault();',
+  self: genGuard(`$event.target !== $event.currentTarget`),
+  ctrl: genGuard(`!$event.ctrlKey`),
+  shift: genGuard(`!$event.shiftKey`),
+  alt: genGuard(`!$event.altKey`),
+  meta: genGuard(`!$event.metaKey`),
+  left: genGuard(`'button' in $event && $event.button !== 0`),
+  middle: genGuard(`'button' in $event && $event.button !== 1`),
+  right: genGuard(`'button' in $event && $event.button !== 2`)
+}
+
+export function genHandlers(
+  events: ASTElementHandlers,
+  isNative: boolean
+): string {
+  const prefix = isNative ? 'nativeOn:' : 'on:'
+  let staticHandlers = ``
+  let dynamicHandlers = ``
+  for (const name in events) {
+    const handlerCode = genHandler(events[name])
+    //@ts-expect-error
+    if (events[name] && events[name].dynamic) {
+      dynamicHandlers += `${name},${handlerCode},`
+    } else {
+      staticHandlers += `"${name}":${handlerCode},`
+    }
+  }
+  staticHandlers = `{${staticHandlers.slice(0, -1)}}`
+  if (dynamicHandlers) {
+    return prefix + `_d(${staticHandlers},[${dynamicHandlers.slice(0, -1)}])`
+  } else {
+    return prefix + staticHandlers
+  }
+}
+
+function genHandler(
+  handler: ASTElementHandler | Array<ASTElementHandler>
+): string {
+  if (!handler) {
+    return 'function(){}'
+  }
+
+  if (Array.isArray(handler)) {
+    return `[${handler.map(handler => genHandler(handler)).join(',')}]`
+  }
+
+  const isMethodPath = simplePathRE.test(handler.value)
+  const isFunctionExpression = fnExpRE.test(handler.value)
+  const isFunctionInvocation = simplePathRE.test(
+    handler.value.replace(fnInvokeRE, '')
+  )
+
+  if (!handler.modifiers) {
+    if (isMethodPath || isFunctionExpression) {
+      return handler.value
+    }
+    return `function($event){${
+      isFunctionInvocation ? `return ${handler.value}` : handler.value
+    }}` // inline statement
+  } else {
+    let code = ''
+    let genModifierCode = ''
+    const keys: string[] = []
+    for (const key in handler.modifiers) {
+      if (modifierCode[key]) {
+        genModifierCode += modifierCode[key]
+        // left/right
+        if (keyCodes[key]) {
+          keys.push(key)
+        }
+      } else if (key === 'exact') {
+        const modifiers = handler.modifiers
+        genModifierCode += genGuard(
+          ['ctrl', 'shift', 'alt', 'meta']
+            .filter(keyModifier => !modifiers[keyModifier])
+            .map(keyModifier => `$event.${keyModifier}Key`)
+            .join('||')
+        )
+      } else {
+        keys.push(key)
+      }
+    }
+    if (keys.length) {
+      code += genKeyFilter(keys)
+    }
+    // Make sure modifiers like prevent and stop get executed after key filtering
+    if (genModifierCode) {
+      code += genModifierCode
+    }
+    const handlerCode = isMethodPath
+      ? `return ${handler.value}.apply(null, arguments)`
+      : isFunctionExpression
+      ? `return (${handler.value}).apply(null, arguments)`
+      : isFunctionInvocation
+      ? `return ${handler.value}`
+      : handler.value
+    return `function($event){${code}${handlerCode}}`
+  }
+}
+
+function genKeyFilter(keys: Array<string>): string {
+  return (
+    // make sure the key filters only apply to KeyboardEvents
+    // #9441: can't use 'keyCode' in $event because Chrome autofill fires fake
+    // key events that do not have keyCode property...
+    `if(!$event.type.indexOf('key')&&` +
+    `${keys.map(genFilterCode).join('&&')})return null;`
+  )
+}
+
+function genFilterCode(key: string): string {
+  const keyVal = parseInt(key, 10)
+  if (keyVal) {
+    return `$event.keyCode!==${keyVal}`
+  }
+  const keyCode = keyCodes[key]
+  const keyName = keyNames[key]
+  return (
+    `_k($event.keyCode,` +
+    `${JSON.stringify(key)},` +
+    `${JSON.stringify(keyCode)},` +
+    `$event.key,` +
+    `${JSON.stringify(keyName)}` +
+    `)`
+  )
+}