@builder.io/sdk-vue 0.6.1-1 → 0.6.1

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

@@ -1,203 +0,0 @@
-import { parse } from '../src/parse'
-import { compileStyle, compileStyleAsync } from '../src/compileStyle'
-
-test('preprocess less', () => {
-  const style = parse({
-    source:
-      '<style lang="less">\n' +
-      '@red: rgb(255, 0, 0);\n' +
-      '.color { color: @red; }\n' +
-      '</style>\n',
-    filename: 'example.vue',
-    sourceMap: true
-  }).styles[0]
-
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: style.content,
-    map: style.map,
-    scoped: false,
-    preprocessLang: style.lang
-  })
-
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toEqual(expect.stringContaining('color: #ff0000;'))
-  expect(result.map).toBeTruthy()
-})
-
-test('preprocess scss', () => {
-  const style = parse({
-    source:
-      '<style lang="scss">\n' +
-      '$red: red;\n' +
-      '.color { color: $red; }\n' +
-      '</style>\n',
-    filename: 'example.vue',
-    sourceMap: true
-  }).styles[0]
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: style.content,
-    map: style.map,
-    scoped: false,
-    preprocessLang: style.lang
-  })
-
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toMatch('color: red;')
-  expect(result.map).toBeTruthy()
-})
-
-test('preprocess sass', () => {
-  const style = parse({
-    source:
-      '<style lang="sass">\n' +
-      '$red: red\n' +
-      '.color\n' +
-      '   color: $red\n' +
-      '</style>\n',
-    filename: 'example.vue',
-    sourceMap: true
-  }).styles[0]
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: style.content,
-    map: style.map,
-    scoped: false,
-    preprocessLang: style.lang
-  })
-
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toMatch('color: red;')
-  expect(result.map).toBeTruthy()
-})
-
-test('preprocess stylus', () => {
-  const style = parse({
-    source:
-      '<style lang="styl">\n' +
-      'red-color = rgb(255, 0, 0);\n' +
-      '.color\n' +
-      '   color: red-color\n' +
-      '</style>\n',
-    filename: 'example.vue',
-    sourceMap: true
-  }).styles[0]
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: style.content,
-    map: style.map,
-    scoped: false,
-    preprocessLang: style.lang
-  })
-
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toEqual(expect.stringContaining('color: #f00;'))
-  expect(result.map).toBeTruthy()
-})
-
-test('custom postcss plugin', () => {
-  const spy = vi.fn()
-
-  compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: '.foo { color: red }',
-    scoped: false,
-    postcssPlugins: [require('postcss').plugin('test-plugin', () => spy)()]
-  })
-
-  expect(spy).toHaveBeenCalled()
-})
-
-test('custom postcss options', () => {
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: '.foo { color: red }',
-    scoped: false,
-    postcssOptions: { random: 'foo' }
-  })
-
-  expect((result.rawResult as any).opts.random).toBe('foo')
-})
-
-test('async postcss plugin in sync mode', () => {
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: '.foo { color: red }',
-    scoped: false,
-    postcssPlugins: [
-      require('postcss').plugin(
-        'test-plugin',
-        () => async (result: any) => result
-      )
-    ]
-  })
-
-  expect(result.errors).toHaveLength(1)
-})
-
-test('async postcss plugin', async () => {
-  const promise = compileStyleAsync({
-    id: 'v-scope-xxx',
-    filename: 'example.vue',
-    source: '.foo { color: red }',
-    scoped: false,
-    postcssPlugins: [
-      require('postcss').plugin(
-        'test-plugin',
-        () => async (result: any) => result
-      )
-    ]
-  })
-
-  expect(promise instanceof Promise).toBe(true)
-
-  const result = await promise
-  expect(result.errors).toHaveLength(0)
-  expect(result.code).toEqual(expect.stringContaining('color: red'))
-})
-
-test('media query', () => {
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    scoped: true,
-    filename: 'example.vue',
-    source: `
-@media print {
-  .foo {
-    color: #000;
-  }
-}`
-  })
-
-  expect(result.errors).toHaveLength(0)
-  expect(result.code).toContain(
-    '@media print {\n.foo[v-scope-xxx] {\n    color: #000;\n}\n}'
-  )
-})
-
-test('supports query', () => {
-  const result = compileStyle({
-    id: 'v-scope-xxx',
-    scoped: true,
-    filename: 'example.vue',
-    source: `
-@supports ( color: #000 ) {
-  .foo {
-    color: #000;
-  }
-}`
-  })
-
-  expect(result.errors).toHaveLength(0)
-  expect(result.code).toContain(
-    '@supports ( color: #000 ) {\n.foo[v-scope-xxx] {\n    color: #000;\n}\n}'
-  )
-})

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

@@ -1,258 +0,0 @@
-import { parse } from '../src/parse'
-import { SFCBlock } from '../src/parseComponent'
-import { compileTemplate } from '../src/compileTemplate'
-import Vue from 'vue'
-
-function mockRender(code: string, mocks: Record<string, any> = {}) {
-  const fn = new Function(
-    `require`,
-    `${code}; return { render, staticRenderFns }`
-  )
-  const vm = new Vue(
-    Object.assign(
-      {},
-      fn((id: string) => mocks[id])
-    )
-  )
-  vm.$mount()
-  return (vm as any)._vnode
-}
-
-test('should work', () => {
-  const source = `<div><p>{{ render }}</p></div>`
-
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source
-  })
-
-  expect(result.errors.length).toBe(0)
-  expect(result.source).toBe(source)
-  // should expose render fns
-  expect(result.code).toMatch(`var render = function`)
-  expect(result.code).toMatch(`var staticRenderFns = []`)
-  // should mark with stripped
-  expect(result.code).toMatch(`render._withStripped = true`)
-  // should prefix bindings
-  expect(result.code).toMatch(`_vm.render`)
-  expect(result.ast).not.toBeUndefined()
-})
-
-test('preprocess pug', () => {
-  const template = parse({
-    source:
-      '<template lang="pug">\n' +
-      'body\n' +
-      ' h1 Pug Examples\n' +
-      ' div.container\n' +
-      '   p Cool Pug example!\n' +
-      '</template>\n',
-    filename: 'example.vue',
-    sourceMap: true
-  }).template as SFCBlock
-
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source: template.content,
-    preprocessLang: template.lang
-  })
-
-  expect(result.errors.length).toBe(0)
-})
-
-/**
- * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
- */
-test('supports uri fragment in transformed require', () => {
-  const source = '<svg>\
-    <use href="~@svg/file.svg#fragment"></use>\
-  </svg>' //
-  const result = compileTemplate({
-    filename: 'svgparticle.html',
-    source: source,
-    transformAssetUrls: {
-      use: 'href'
-    }
-  })
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toMatch(
-    /href: require\("@svg\/file.svg"\) \+ "#fragment"/
-  )
-})
-
-/**
- * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
- */
-test('when too short uri then empty require', () => {
-  const source = '<svg>\
-    <use href="~"></use>\
-  </svg>' //
-  const result = compileTemplate({
-    filename: 'svgparticle.html',
-    source: source,
-    transformAssetUrls: {
-      use: 'href'
-    }
-  })
-  expect(result.errors.length).toBe(0)
-  expect(result.code).toMatch(/href: require\(""\)/)
-})
-
-test('warn missing preprocessor', () => {
-  const template = parse({
-    source: '<template lang="unknownLang">\n' + '</template>\n',
-
-    filename: 'example.vue',
-    sourceMap: true
-  }).template as SFCBlock
-
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source: template.content,
-    preprocessLang: template.lang
-  })
-
-  expect(result.errors.length).toBe(1)
-})
-
-test('transform assetUrls', () => {
-  const source = `
-<div>
-  <img src="./logo.png">
-  <img src="~fixtures/logo.png">
-  <img src="~/fixtures/logo.png">
-</div>
-`
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source,
-    transformAssetUrls: true
-  })
-  expect(result.errors.length).toBe(0)
-
-  const vnode = mockRender(result.code, {
-    './logo.png': 'a',
-    'fixtures/logo.png': 'b'
-  })
-
-  expect(vnode.children[0].data.attrs.src).toBe('a')
-  expect(vnode.children[2].data.attrs.src).toBe('b')
-  expect(vnode.children[4].data.attrs.src).toBe('b')
-})
-
-test('transform srcset', () => {
-  const source = `
-<div>
-  <img src="./logo.png">
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
-    <image xlink:href="./logo.png" />
-  </svg>
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
-    <use xlink:href="./logo.png"/>
-  </svg>
-  </svg>
-  <img src="./logo.png" srcset="./logo.png">
-  <img src="./logo.png" srcset="./logo.png 2x">
-  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x">
-  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png">
-  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
-  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x">
-  <img
-    src="./logo.png"
-    srcset="
-      ./logo.png 2x,
-      ./logo.png 3x
-  ">
-</div>
-`
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source,
-    transformAssetUrls: true
-  })
-  expect(result.errors.length).toBe(0)
-
-  const vnode = mockRender(result.code, {
-    './logo.png': 'test-url'
-  })
-
-  // img tag
-  expect(vnode.children[0].data.attrs.src).toBe('test-url')
-  // image tag (SVG)
-  expect(vnode.children[2].children[0].data.attrs['xlink:href']).toBe(
-    'test-url'
-  )
-  // use tag (SVG)
-  expect(vnode.children[4].children[0].data.attrs['xlink:href']).toBe(
-    'test-url'
-  )
-
-  // image tag with srcset
-  expect(vnode.children[6].data.attrs.srcset).toBe('test-url')
-  expect(vnode.children[8].data.attrs.srcset).toBe('test-url 2x')
-  // image tag with multiline srcset
-  expect(vnode.children[10].data.attrs.srcset).toBe('test-url, test-url 2x')
-  expect(vnode.children[12].data.attrs.srcset).toBe('test-url 2x, test-url')
-  expect(vnode.children[14].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
-  expect(vnode.children[16].data.attrs.srcset).toBe(
-    'test-url, test-url 2x, test-url 3x'
-  )
-  expect(vnode.children[18].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
-})
-
-test('transform assetUrls and srcset with base option', () => {
-  const source = `
-<div>
-  <img src="./logo.png">
-  <img src="~fixtures/logo.png">
-  <img src="~/fixtures/logo.png">
-  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
-  <img src="@/fixtures/logo.png">
-</div>
-`
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source,
-    transformAssetUrls: true,
-    transformAssetUrlsOptions: { base: '/base/' }
-  })
-
-  expect(result.errors.length).toBe(0)
-
-  const vnode = mockRender(result.code, {
-    '@/fixtures/logo.png': 'aliased'
-  })
-  expect(vnode.children[0].data.attrs.src).toBe('/base/logo.png')
-  expect(vnode.children[2].data.attrs.src).toBe('/base/fixtures/logo.png')
-  expect(vnode.children[4].data.attrs.src).toBe('/base/fixtures/logo.png')
-  expect(vnode.children[6].data.attrs.srcset).toBe(
-    '/base/logo.png 2x, /base/logo.png 3x'
-  )
-  expect(vnode.children[8].data.attrs.src).toBe('aliased')
-})
-
-test('transform with includeAbsolute', () => {
-  const source = `
-  <div>
-    <img src="./logo.png">
-    <img src="/logo.png">
-    <img src="https://foo.com/logo.png">
-  </div>
-  `
-  const result = compileTemplate({
-    filename: 'example.vue',
-    source,
-    transformAssetUrls: true,
-    transformAssetUrlsOptions: { includeAbsolute: true }
-  })
-
-  expect(result.errors.length).toBe(0)
-
-  const vnode = mockRender(result.code, {
-    './logo.png': 'relative',
-    '/logo.png': 'absolute'
-  })
-  expect(vnode.children[0].data.attrs.src).toBe('relative')
-  expect(vnode.children[2].data.attrs.src).toBe('absolute')
-  expect(vnode.children[4].data.attrs.src).toBe('https://foo.com/logo.png')
-})

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

@@ -1,247 +0,0 @@
-import { compileStyle, parse } from '../src'
-import { mockId, compile, assertCode } from './util'
-
-describe('CSS vars injection', () => {
-  test('generating correct code for nested paths', () => {
-    const { content } = compile(
-      `<script>const a = 1</script>\n` +
-        `<style>div{
-          color: v-bind(color);
-          font-size: v-bind('font.size');
-        }</style>`
-    )
-    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "${mockId}-color": (_vm.color),
-  "${mockId}-font_size": (_vm.font.size)
-})`)
-    assertCode(content)
-  })
-
-  test('w/ normal <script> binding analysis', () => {
-    const { content } = compile(
-      `<script>
-      export default {
-        setup() {
-          return {
-            size: ref('100px')
-          }
-        }
-      }
-      </script>\n` +
-        `<style>
-          div {
-            font-size: v-bind(size);
-          }
-        </style>`
-    )
-    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "${mockId}-size": (_vm.size)
-})`)
-    expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
-    assertCode(content)
-  })
-
-  test('w/ <script setup> binding analysis', () => {
-    const { content } = compile(
-      `<script setup>
-        import { defineProps, ref } from 'vue'
-        const color = 'red'
-        const size = ref('10px')
-        defineProps({
-          foo: String
-        })
-        </script>\n` +
-        `<style>
-          div {
-            color: v-bind(color);
-            font-size: v-bind(size);
-            border: v-bind(foo);
-          }
-        </style>`
-    )
-    // should handle:
-    // 1. local const bindings
-    // 2. local potential ref bindings
-    // 3. props bindings (analyzed)
-    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "${mockId}-color": (_setup.color),
-  "${mockId}-size": (_setup.size),
-  "${mockId}-foo": (_vm.foo)
-})`)
-    expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
-    assertCode(content)
-  })
-
-  test('should rewrite CSS vars in compileStyle', () => {
-    const { code } = compileStyle({
-      source: `.foo {
-        color: v-bind(color);
-        font-size: v-bind('font.size');
-      }`,
-      filename: 'test.css',
-      id: 'data-v-test'
-    })
-    expect(code).toMatchInlineSnapshot(`
-      ".foo[data-v-test] {
-              color: var(--test-color);
-              font-size: var(--test-font_size);
-      }"
-    `)
-  })
-
-  test('prod mode', () => {
-    const { content } = compile(
-      `<script>const a = 1</script>\n` +
-        `<style>div{
-          color: v-bind(color);
-          font-size: v-bind('font.size');
-        }</style>`,
-      { isProd: true }
-    )
-    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "4003f1a6": (_vm.color),
-  "41b6490a": (_vm.font.size)
-}))}`)
-
-    const { code } = compileStyle({
-      source: `.foo {
-        color: v-bind(color);
-        font-size: v-bind('font.size');
-      }`,
-      filename: 'test.css',
-      id: mockId,
-      isProd: true
-    })
-    expect(code).toMatchInlineSnapshot(`
-      ".foo[xxxxxxxx] {
-              color: var(--4003f1a6);
-              font-size: var(--41b6490a);
-      }"
-    `)
-  })
-
-  describe('codegen', () => {
-    test('<script> w/ no default export', () => {
-      assertCode(
-        compile(
-          `<script>const a = 1</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
-      )
-    })
-
-    test('<script> w/ default export', () => {
-      assertCode(
-        compile(
-          `<script>export default { setup() {} }</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
-      )
-    })
-
-    test('<script> w/ default export in strings/comments', () => {
-      assertCode(
-        compile(
-          `<script>
-          // export default {}
-          export default {}
-        </script>\n` + `<style>div{ color: v-bind(color); }</style>`
-        ).content
-      )
-    })
-
-    test('w/ <script setup>', () => {
-      assertCode(
-        compile(
-          `<script setup>const color = 'red'</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
-      )
-    })
-
-    //#4185
-    test('should ignore comments', () => {
-      const { content } = compile(
-        `<script setup>const color = 'red';const width = 100</script>\n` +
-          `<style>
-            /* comment **/
-            div{ /* color: v-bind(color); */ width:20; }
-            div{ width: v-bind(width); }
-            /* comment */
-          </style>`
-      )
-
-      expect(content).not.toMatch(`"${mockId}-color": (_setup.color)`)
-      expect(content).toMatch(`"${mockId}-width": (_setup.width)`)
-      assertCode(content)
-    })
-
-    test('w/ <script setup> using the same var multiple times', () => {
-      const { content } = compile(
-        `<script setup>
-        const color = 'red'
-        </script>\n` +
-          `<style>
-          div {
-            color: v-bind(color);
-          }
-          p {
-            color: v-bind(color);
-          }
-        </style>`
-      )
-      // color should only be injected once, even if it is twice in style
-      expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "${mockId}-color": (_setup.color)
-})`)
-      assertCode(content)
-    })
-
-    test('should work with w/ complex expression', () => {
-      const { content } = compile(
-        `<script setup>
-        let a = 100
-        let b = 200
-        let foo = 300
-        </script>\n` +
-          `<style>
-          p{
-            width: calc(v-bind(foo) - 3px);
-            height: calc(v-bind('foo') - 3px);
-            top: calc(v-bind(foo + 'px') - 3px);
-          }
-          div {
-            color: v-bind((a + b) / 2 + 'px' );
-          }
-          div {
-            color: v-bind    ((a + b) / 2 + 'px' );
-          }
-          p {
-            color: v-bind(((a + b)) / (2 * a));
-          }
-        </style>`
-      )
-      expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
-  "${mockId}-foo": (_setup.foo),
-  "${mockId}-foo____px_": (_setup.foo + 'px'),
-  "${mockId}-_a___b____2____px_": ((_setup.a + _setup.b) / 2 + 'px'),
-  "${mockId}-__a___b______2___a_": (((_setup.a + _setup.b)) / (2 * _setup.a))
-})`)
-      assertCode(content)
-    })
-
-    // #6022
-    test('should be able to parse incomplete expressions', () => {
-      const { cssVars } = parse({
-        source: `<script setup>let xxx = 1</script>
-        <style scoped>
-        label {
-          font-weight: v-bind("count.toString(");
-          font-weight: v-bind(xxx);
-        }
-        </style>`
-      })
-      expect(cssVars).toMatchObject([`count.toString(`, `xxx`])
-    })
-  })
-})