feat: basic render

packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { template } from 'vue/vapor'
+const t0 = template(\`<h1 id=\\"title\\">Counter</h1>\`)
+export default /*#__PURE__*/_defineComponent({
+  setup(__props) {
+
+console.log('script')
+
+return (() => {
+const root = t0()
+return root
+})();
+}
+
+})"
+`;

packages/compiler-vapor/__tests__/basic.test.ts

@@ -1,3 +1,14 @@
-test('basic', () => {
-  //
+import * as CompilerVapor from '../src'
+// import * as CompilerDOM from '@vue/compiler-dom'
+import { parse, compileScript } from '@vue/compiler-sfc'
+import source from './fixtures/counter.vue?raw'
+
+test('basic', async () => {
+  const { descriptor } = parse(source, { compiler: CompilerVapor })
+  const script = compileScript(descriptor, {
+    id: 'counter.vue',
+    inlineTemplate: true,
+    templateOptions: { compiler: CompilerVapor }
+  })
+  expect(script.content).matchSnapshot()
 })

packages/compiler-vapor/__tests__/fixtures/counter.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+console.log('script')
+</script>
+
+<template>
+  <h1 id="title">Counter</h1>
+</template>

packages/compiler-vapor/package.json

@@ -28,11 +28,9 @@
   },
   "homepage": "https://github.com/vuejs/core-vapor/tree/dev/packages/compiler-vapor#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.0",
-    "@vue/compiler-core": "3.3.8",
     "@vue/shared": "3.3.8",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.5"
+    "@vue/compiler-dom": "3.3.8",
+    "ast-kit": "^0.11.2"
   },
   "devDependencies": {
     "@babel/types": "^7.23.0"

packages/compiler-vapor/src/compile.ts

@@ -0,0 +1,19 @@
+import {
+  CodegenResult,
+  CompilerOptions,
+  RootNode,
+  baseParse
+} from '@vue/compiler-dom'
+import { isString } from '@vue/shared'
+import { transform } from './transform'
+import { generate } from './generate'
+
+// code/AST -> IR -> JS codegen
+export function compile(
+  template: string | RootNode,
+  options: CompilerOptions
+): CodegenResult {
+  const ast = isString(template) ? baseParse(template, options) : template
+  const ir = transform(ast, options)
+  return generate(ir, options)
+}

packages/compiler-vapor/src/generate.ts

@@ -0,0 +1,39 @@
+import {
+  CodegenContext,
+  CodegenOptions,
+  CodegenResult
+} from '@vue/compiler-dom'
+import { RootIRNode } from './transform'
+
+// IR -> JS codegen
+export function generate(
+  ast: RootIRNode,
+  options: CodegenOptions & {
+    onContextCreated?: (context: CodegenContext) => void
+  } = {}
+): CodegenResult {
+  let code = ''
+  let preamble = "import { template } from 'vue/vapor'\n"
+
+  const isSetupInlined = !!options.inline
+
+  preamble += ast.template
+    .map((template, i) => `const t${i} = template(\`${template.template}\`)`)
+    .join('\n')
+
+  code += 'const root = t0()\n'
+  code += 'return root'
+
+  const functionName = options.ssr ? `ssrRender` : `render`
+  if (isSetupInlined) {
+    code = `(() => {\n${code}\n})();`
+  } else {
+    code = `${preamble}\nexport function ${functionName}() {\n${code}\n}`
+  }
+
+  return {
+    code,
+    ast: ast as any,
+    preamble
+  }
+}

packages/compiler-vapor/src/index.ts

@@ -1 +1,4 @@
-export const foo = 'bar'
+export { parse } from '@vue/compiler-dom'
+export { transform } from './transform'
+export { generate } from './generate'
+export { compile } from './compile'

packages/compiler-vapor/src/transform.ts

@@ -0,0 +1,113 @@
+import {
+  RootNode,
+  TemplateChildNode,
+  ElementNode,
+  AttributeNode,
+  SourceLocation,
+  NodeTypes,
+  InterpolationNode
+} from '@vue/compiler-dom'
+import { TransformOptions } from 'vite'
+
+export const enum IRNodeTypes {
+  ROOT,
+  TEMPLATE_GENERATOR
+}
+
+export interface IRNode {
+  type: IRNodeTypes
+  loc: SourceLocation
+}
+
+export interface RootIRNode extends IRNode {
+  type: IRNodeTypes.ROOT
+  template: Array<TemplateGeneratorIRNode>
+  helpers: Set<string>
+}
+
+export interface TemplateGeneratorIRNode extends IRNode {
+  type: IRNodeTypes.TEMPLATE_GENERATOR
+  template: string
+}
+
+// AST -> IR
+export function transform(
+  root: RootNode,
+  options: TransformOptions = {}
+): RootIRNode {
+  const template = transformChildren(root.children)
+
+  return {
+    type: IRNodeTypes.ROOT,
+    loc: root.loc,
+    template: [
+      {
+        type: IRNodeTypes.TEMPLATE_GENERATOR,
+        template,
+        loc: root.loc
+      }
+    ],
+    helpers: new Set(['template'])
+  }
+}
+
+function transformChildren(children: TemplateChildNode[]) {
+  let template: string = ''
+  children.forEach((child, i) => walkNode(child, children.length > i + 1))
+  return template
+
+  function walkNode(node: TemplateChildNode, hasSibling: boolean) {
+    switch (node.type) {
+      case 1 satisfies NodeTypes.ELEMENT: {
+        template += transformElement(node, hasSibling)
+        break
+      }
+      case 2 satisfies NodeTypes.TEXT:
+        template += node.content
+        break
+      case 5 satisfies NodeTypes.INTERPOLATION:
+        template += transformInterpolation(node)
+        break
+      case 12 satisfies NodeTypes.TEXT_CALL:
+        template += node.content
+    }
+  }
+}
+
+function transformInterpolation(node: InterpolationNode) {
+  // TODO
+  if (node.content.type === (4 satisfies NodeTypes.SIMPLE_EXPRESSION)) {
+    return `{{ ${node.content.content} }}`
+  }
+  return '[EXP]'
+  // return `{{${node.content.content}}}`
+}
+
+function transformElement(node: ElementNode, hasSibling: boolean) {
+  const { tag, props, children } = node
+  let template = `<${tag}`
+  const propsTemplate = props
+    .filter(
+      (prop): prop is AttributeNode =>
+        prop.type === (6 satisfies NodeTypes.ATTRIBUTE)
+    )
+    .map(prop => transformProp(prop))
+    .join(' ')
+
+  if (propsTemplate) template += ' ' + propsTemplate
+  template += `>`
+
+  if (children.length > 0) {
+    template += transformChildren(children)
+  }
+
+  template += `</${tag}>`
+
+  return template
+}
+
+function transformProp(prop: AttributeNode) {
+  const { name, value } = prop
+  if (value) return `${name}="${value.content}"`
+  return name
+}

packages/runtime-vapor/package.json

@@ -2,17 +2,24 @@
   "name": "@vue/runtime-vapor",
   "version": "0.0.0",
   "description": "@vue/runtime-vapor",
-  "main": "dist/runtime-vapor.cjs.js",
+  "main": "index.js",
+  "module": "dist/runtime-vapor.esm-bundler.js",
+  "types": "dist/runtime-vapor.d.ts",
+  "unpkg": "dist/runtime-vapor.global.js",
   "files": [
+    "index.js",
     "dist"
   ],
+  "sideEffects": false,
   "buildOptions": {
+    "name": "VueRuntimeVapor",
     "formats": [
-      "cjs"
-    ],
-    "prod": false
+      "esm-bundler",
+      "esm-browser",
+      "cjs",
+      "global"
+    ]
   },
-  "types": "dist/runtime-vapor.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/core-vapor.git",

packages/runtime-vapor/src/index.ts

@@ -1 +1,2 @@
 export { template } from './template'
+export { render } from './render'

packages/runtime-vapor/src/render.ts

@@ -0,0 +1,103 @@
+import {
+  effectScope,
+  normalizeClass,
+  normalizeStyle,
+  toDisplayString
+} from 'vue'
+import { isArray } from '@vue/shared'
+
+export type Block = Node | Fragment | Block[]
+export type Fragment = { nodes: Block; anchor?: Node }
+export type BlockFn = (props?: any) => Block
+
+export function render(
+  comp: BlockFn,
+  container: string | ParentNode
+): () => void {
+  const scope = effectScope()
+  const block = scope.run(() => comp())!
+  insert(block, (container = normalizeContainer(container)))
+  return () => {
+    scope.stop()
+    remove(block, container as ParentNode)
+  }
+}
+
+export function normalizeContainer(container: string | ParentNode): ParentNode {
+  return typeof container === 'string'
+    ? (document.querySelector(container) as ParentNode)
+    : container
+}
+
+export function insert(
+  block: Block,
+  parent: ParentNode,
+  anchor: Node | null = null
+) {
+  // if (!isHydrating) {
+  if (block instanceof Node) {
+    parent.insertBefore(block, anchor)
+  } else if (isArray(block)) {
+    for (const child of block) insert(child, parent, anchor)
+  } else {
+    insert(block.nodes, parent, anchor)
+    block.anchor && parent.insertBefore(block.anchor, anchor)
+  }
+  // }
+}
+
+export function remove(block: Block, parent: ParentNode) {
+  if (block instanceof Node) {
+    parent.removeChild(block)
+  } else if (isArray(block)) {
+    for (const child of block) remove(child, parent)
+  } else {
+    remove(block.nodes, parent)
+    block.anchor && parent.removeChild(block.anchor)
+  }
+}
+
+export function setText(el: Element, oldVal: any, newVal: any) {
+  if ((newVal = toDisplayString(newVal)) !== oldVal) {
+    el.textContent = newVal
+  }
+}
+
+export function setClass(el: Element, oldVal: any, newVal: any) {
+  if ((newVal = normalizeClass(newVal)) !== oldVal && (newVal || oldVal)) {
+    el.className = newVal
+  }
+}
+
+export function setStyle(el: HTMLElement, oldVal: any, newVal: any) {
+  if ((newVal = normalizeStyle(newVal)) !== oldVal && (newVal || oldVal)) {
+    if (typeof newVal === 'string') {
+      el.style.cssText = newVal
+    } else {
+      // TODO
+    }
+  }
+}
+
+export function setAttr(el: Element, key: string, oldVal: any, newVal: any) {
+  if (newVal !== oldVal) {
+    if (newVal != null) {
+      el.setAttribute(key, newVal)
+    } else {
+      el.removeAttribute(key)
+    }
+  }
+}
+
+export function setDynamicProp(el: Element, key: string, val: any) {
+  if (key === 'class') {
+    setClass(el, void 0, val)
+  } else if (key === 'style') {
+    setStyle(el as HTMLElement, void 0, val)
+  } else if (key in el) {
+    ;(el as any)[key] = val
+  } else {
+    // TODO special checks
+    setAttr(el, key, void 0, val)
+  }
+}

packages/vue/compiler-vapor/index.d.mts

@@ -0,0 +1 @@
+export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/index.d.ts

@@ -0,0 +1 @@
+export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/index.js

@@ -0,0 +1 @@
+module.exports = require('@vue/compiler-vapor')

packages/vue/compiler-vapor/index.mjs

@@ -0,0 +1 @@
+export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "index.js",
+  "module": "index.mjs"
+}

packages/vue/package.json

@@ -53,6 +53,26 @@
         "default": "./compiler-sfc/index.js"
       }
     },
+    "./vapor": {
+      "import": {
+        "types": "./vapor/index.d.mts",
+        "default": "./vapor/index.mjs"
+      },
+      "require": {
+        "types": "./vapor/index.d.ts",
+        "default": "./vapor/index.js"
+      }
+    },
+    "./compiler-vapor": {
+      "import": {
+        "types": "./compiler-vapor/index.d.mts",
+        "default": "./compiler-vapor/index.mjs"
+      },
+      "require": {
+        "types": "./compiler-vapor/index.d.ts",
+        "default": "./compiler-vapor/index.js"
+      }
+    },
     "./jsx-runtime": {
       "types": "./jsx-runtime/index.d.ts",
       "import": "./jsx-runtime/index.mjs",
@@ -99,6 +119,8 @@
     "@vue/shared": "3.3.8",
     "@vue/compiler-dom": "3.3.8",
     "@vue/runtime-dom": "3.3.8",
+    "@vue/runtime-vapor": "workspace:*",
+    "@vue/compiler-vapor": "workspace:*",
     "@vue/compiler-sfc": "3.3.8",
     "@vue/server-renderer": "3.3.8"
   },

packages/vue/vapor/index.d.mts

@@ -0,0 +1 @@
+export * from '@vue/runtime-vapor'

packages/vue/vapor/index.d.ts

@@ -0,0 +1 @@
+export * from '@vue/runtime-vapor'

packages/vue/vapor/index.js

@@ -0,0 +1 @@
+module.exports = require('@vue/runtime-vapor')

packages/vue/vapor/index.mjs

@@ -0,0 +1 @@
+export * from '@vue/runtime-vapor'

packages/vue/vapor/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "index.js",
+  "module": "index.mjs"
+}

playground/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Vapor</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>

playground/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "playground",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "vue": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vite": "^4.5.0",
+    "vite-plugin-inspect": "^0.7.42"
+  }
+}

playground/src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <div>
+    <h1 class="red">Hello world</h1>
+    {{ count }}
+    <button style="font-weight: bold">Inc</button>
+  </div>
+</template>
+
+<style>
+.red {
+  color: red;
+}
+</style>

playground/src/main.ts

@@ -0,0 +1,5 @@
+import { render } from 'vue/vapor'
+// @ts-expect-error
+import App from './App.vue'
+
+render(App.render, '#app')

playground/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import Inspect from 'vite-plugin-inspect'
+import * as CompilerVapor from '../packages/compiler-vapor/src'
+
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: {
+        compiler: CompilerVapor
+      }
+    }),
+    Inspect()
+  ]
+})

pnpm-lock.yaml

@@ -259,25 +259,19 @@ importers:
 
   packages/compiler-vapor:
     dependencies:
-      '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
-      '@vue/compiler-core':
+      '@vue/compiler-dom':
         specifier: 3.3.8
-        version: link:../compiler-core
+        version: link:../compiler-dom
       '@vue/shared':
         specifier: 3.3.8
         version: link:../shared
-      estree-walker:
-        specifier: ^2.0.2
-        version: 2.0.2
-      magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
+      ast-kit:
+        specifier: ^0.11.2
+        version: 0.11.2(rollup@4.1.4)
     devDependencies:
       '@babel/types':
         specifier: ^7.23.0
-        version: 7.23.0
+        version: 7.23.3
 
   packages/dts-built-test:
     dependencies:
@@ -416,9 +410,15 @@ importers:
       '@vue/compiler-sfc':
         specifier: 3.3.8
         version: link:../compiler-sfc
+      '@vue/compiler-vapor':
+        specifier: workspace:*
+        version: link:../compiler-vapor
       '@vue/runtime-dom':
         specifier: 3.3.8
         version: link:../runtime-dom
+      '@vue/runtime-vapor':
+        specifier: workspace:*
+        version: link:../runtime-vapor
       '@vue/server-renderer':
         specifier: 3.3.8
         version: link:../server-renderer
@@ -444,6 +444,22 @@ importers:
         specifier: 3.3.8
         version: link:../vue
 
+  playground:
+    dependencies:
+      vue:
+        specifier: workspace:*
+        version: link:../packages/vue
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^4.4.0
+        version: 4.4.0(vite@4.5.0)(vue@packages+vue)
+      vite:
+        specifier: ^4.5.0
+        version: 4.5.0(@types/node@20.9.0)(terser@5.22.0)
+      vite-plugin-inspect:
+        specifier: ^0.7.42
+        version: 0.7.42(rollup@4.1.4)(vite@4.5.0)
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -459,6 +475,10 @@ packages:
       '@jridgewell/trace-mapping': 0.3.20
     dev: true
 
+  /@antfu/utils@0.7.6:
+    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
+    dev: true
+
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
@@ -1199,6 +1219,10 @@ packages:
     dev: true
     optional: true
 
+  /@polka/url@1.0.0-next.23:
+    resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==}
+    dev: true
+
   /@puppeteer/browsers@1.8.0:
     resolution: {integrity: sha512-TkRHIV6k2D8OlUe8RtG+5jgOF/H98Myx0M6AOafC8DdNVOFiBSFa5cpRDtpm8LXOa9sVwe0+e6Q3FC56X/DZfg==}
     engines: {node: '>=16.3.0'}
@@ -1334,14 +1358,12 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 4.1.4
-    dev: true
 
   /@rollup/rollup-android-arm-eabi@4.1.4:
     resolution: {integrity: sha512-WlzkuFvpKl6CLFdc3V6ESPt7gq5Vrimd2Yv9IzKXdOpgbH4cdDSS1JLiACX8toygihtH5OlxyQzhXOph7Ovlpw==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.1.4:
@@ -1349,7 +1371,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.1.4:
@@ -1357,7 +1378,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.1.4:
@@ -1365,7 +1385,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.1.4:
@@ -1373,7 +1392,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.1.4:
@@ -1381,7 +1399,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.1.4:
@@ -1389,7 +1406,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.1.4:
@@ -1397,7 +1413,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.1.4:
@@ -1405,7 +1420,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.1.4:
@@ -1413,7 +1427,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.1.4:
@@ -1421,7 +1434,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.1.4:
@@ -1429,7 +1441,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@sinclair/typebox@0.27.8:
@@ -1457,7 +1468,6 @@ packages:
 
   /@types/estree@1.0.3:
     resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
-    dev: true
 
   /@types/hash-sum@1.0.2:
     resolution: {integrity: sha512-UP28RddqY8xcU0SCEp9YKutQICXpaAq9N8U2klqF5hegGha7KzTOL8EdhIIV3bOSGBzjEpN9bU/d+nNZBdJYVw==}
@@ -1899,6 +1909,17 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
+  /ast-kit@0.11.2(rollup@4.1.4):
+    resolution: {integrity: sha512-Q0DjXK4ApbVoIf9GLyCo252tUH44iTnD/hiJ2TQaJeydYWSpKk0sI34+WMel8S9Wt5pbLgG02oJ+gkgX5DV3sQ==}
+    engines: {node: '>=16.14.0'}
+    dependencies:
+      '@babel/parser': 7.23.3
+      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
+      pathe: 1.1.1
+    transitivePeerDependencies:
+      - rollup
+    dev: false
+
   /ast-types@0.13.4:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
@@ -1939,6 +1960,11 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
+  /big-integer@1.6.51:
+    resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
+    engines: {node: '>=0.6'}
+    dev: true
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -1958,6 +1984,13 @@ packages:
       wrap-ansi: 8.1.0
     dev: true
 
+  /bplist-parser@0.2.0:
+    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
+    engines: {node: '>= 5.10.0'}
+    dependencies:
+      big-integer: 1.6.51
+    dev: true
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -2009,6 +2042,13 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /bundle-name@3.0.0:
+    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
+    engines: {node: '>=12'}
+    dependencies:
+      run-applescript: 5.0.0
+    dev: true
+
   /bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -2518,6 +2558,24 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /default-browser-id@3.0.0:
+    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      bplist-parser: 0.2.0
+      untildify: 4.0.0
+    dev: true
+
+  /default-browser@4.0.0:
+    resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      bundle-name: 3.0.0
+      default-browser-id: 3.0.0
+      execa: 7.2.0
+      titleize: 3.0.0
+    dev: true
+
   /define-data-property@1.1.1:
     resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
     engines: {node: '>= 0.4'}
@@ -2527,6 +2585,11 @@ packages:
       has-property-descriptors: 1.0.0
     dev: true
 
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: true
+
   /define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
@@ -2632,6 +2695,10 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
+  /error-stack-parser-es@0.1.1:
+    resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
+    dev: true
+
   /es-abstract@1.22.2:
     resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
     engines: {node: '>= 0.4'}
@@ -2950,6 +3017,21 @@ packages:
       strip-final-newline: 2.0.0
     dev: true
 
+  /execa@7.2.0:
+    resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
+    engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 4.3.1
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.1.0
+      onetime: 6.0.0
+      signal-exit: 3.0.7
+      strip-final-newline: 3.0.0
+    dev: true
+
   /execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -3094,6 +3176,15 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /fs-extra@11.1.1:
+    resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: true
+
   /fs-extra@8.1.0:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
@@ -3112,7 +3203,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind@1.1.2:
@@ -3444,6 +3534,11 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: true
 
+  /human-signals@4.3.1:
+    resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
+    engines: {node: '>=14.18.0'}
+    dev: true
+
   /human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
@@ -3598,6 +3693,12 @@ packages:
     hasBin: true
     dev: true
 
+  /is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dev: true
+
   /is-expression@4.0.0:
     resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
     dependencies:
@@ -3627,6 +3728,14 @@ packages:
       is-extglob: 2.1.1
     dev: true
 
+  /is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+    dependencies:
+      is-docker: 3.0.0
+    dev: true
+
   /is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
     dev: true
@@ -3918,6 +4027,14 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
   /jsonparse@1.3.1:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
@@ -4232,6 +4349,11 @@ packages:
     resolution: {integrity: sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==}
     dev: false
 
+  /mrmime@1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -4390,6 +4512,16 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
+  /open@9.1.0:
+    resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      default-browser: 4.0.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 2.2.0
+    dev: true
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -4565,7 +4697,6 @@ packages:
 
   /pathe@1.1.1:
     resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
-    dev: true
 
   /pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
@@ -4581,7 +4712,6 @@ packages:
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pidtree@0.3.1:
     resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
@@ -5126,12 +5256,18 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.1.4
       '@rollup/rollup-win32-x64-msvc': 4.1.4
       fsevents: 2.3.3
-    dev: true
 
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
 
+  /run-applescript@5.0.0:
+    resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
+    engines: {node: '>=12'}
+    dependencies:
+      execa: 5.1.1
+    dev: true
+
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
@@ -5319,6 +5455,15 @@ packages:
     requiresBuild: true
     dev: true
 
+  /sirv@2.0.3:
+    resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.23
+      mrmime: 1.0.1
+      totalist: 3.0.1
+    dev: true
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -5633,6 +5778,11 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /titleize@3.0.0:
+    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -5653,6 +5803,11 @@ packages:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
     dev: true
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tough-cookie@4.1.3:
     resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
     engines: {node: '>=6'}
@@ -5834,6 +5989,16 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /untildify@4.0.0:
+    resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /update-browserslist-db@1.0.13(browserslist@4.22.1):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -5906,6 +6071,30 @@ packages:
       - terser
     dev: true
 
+  /vite-plugin-inspect@0.7.42(rollup@4.1.4)(vite@4.5.0):
+    resolution: {integrity: sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.6
+      '@rollup/pluginutils': 5.0.5(rollup@4.1.4)
+      debug: 4.3.4
+      error-stack-parser-es: 0.1.1
+      fs-extra: 11.1.1
+      open: 9.1.0
+      picocolors: 1.0.0
+      sirv: 2.0.3
+      vite: 4.5.0(@types/node@20.9.0)(terser@5.22.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /vite@4.5.0(@types/node@20.9.0)(terser@5.22.0):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - 'packages/*'
+  - playground

scripts/dev.js

@@ -92,7 +92,7 @@ const plugins = [
   }
 ]
 
-if (format === 'cjs' || pkg.buildOptions?.enableNonBrowserBranches) {
+if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
   plugins.push(polyfillNode())
 }