test: add playground

.gitignore

@@ -2,6 +2,5 @@
 node_modules
 dist
 TODOs.md
-playground
 *.log
 test/temp

playground/App.vue

@@ -0,0 +1,42 @@
+<template>
+  <h1>Vite Playground <code>__DEV__</code></h1>
+  <TestModuleResolve />
+  <TestHmr />
+  <TestPostCss />
+  <TestScopedCss />
+  <TestCssModules />
+  <TestPreprocessors />
+  <TestAssets />
+  <TestJsonImport />
+  <TestJsx />
+  <h2>Async Component</h2>
+  <TestAsync />
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+import TestModuleResolve from "./TestModuleResolve.vue";
+import TestHmr from "./TestHmr.vue";
+import TestPostCss from "./TestPostCss.vue";
+import TestScopedCss from "./TestScopedCss.vue";
+import TestCssModules from "./TestCssModules.vue";
+import TestPreprocessors from "./TestPreprocessors.vue";
+import TestAssets from "./TestAssets.vue";
+import TestJsonImport from "./TestJsonImport.vue";
+import TestJsx from "./TestJsx.vue";
+
+export default {
+  components: {
+    TestModuleResolve,
+    TestHmr,
+    TestPostCss,
+    TestScopedCss,
+    TestCssModules,
+    TestPreprocessors,
+    TestAssets,
+    TestJsonImport,
+    TestJsx,
+    TestAsync: defineAsyncComponent(() => import("./TestAsync.vue")),
+  },
+};
+</script>

playground/TestAssets.vue

@@ -0,0 +1,42 @@
+<template>
+  <h2>Static Asset Handling</h2>
+  <p>
+    Fonts should be italic if font asset reference from CSS works.
+  </p>
+  <p>
+    Relative asset reference in template:
+    <img src="./testAssets.png" style="width: 30px;" />
+  </p>
+  <p>
+    Absolute asset reference in template:
+    <img src="/public/icon.png" style="width: 30px;" />
+  </p>
+  <div class="css-bg">
+    <span style="background:#fff">CSS background</span>
+  </div>
+  <div class="css-bg-data-uri">
+    <span style="background:#fff">CSS background with Data URI</span>
+  </div>
+</template>
+
+<style>
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/Inter-Italic.woff2") format("woff2"),
+       url("./fonts/Inter-Italic.woff") format("woff");
+}
+body {
+  font-family: 'Inter';
+}
+.css-bg {
+  background: url(/public/icon.png);
+  background-size: 10px;
+}
+.css-bg-data-uri {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAYAAADWr1sfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTAyNkI1RkE4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTAyNkI1Rjk4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTc3NzA2Q0Y4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTc3NzA2RDA4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6nwnGxAAAJtklEQVR42txZ6W9c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);
+  background-size: 10px;
+}
+</style>

playground/TestAsync.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This should show up...</div>
+</template>

playground/TestCssModules.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>CSS Modules</h2>
+  <div :class="$style.blue">&lt;style module&gt; - this should be blue</div>
+  <div :class="imported.turquoise">
+    CSS modules import - this should be orange
+  </div>
+</template>
+
+<script>
+import imported from "./testCssModules.module.css";
+
+export default {
+  data: () => ({ imported }),
+};
+</script>
+
+<style module>
+.blue {
+  color: blue;
+}
+</style>

playground/TestHmr.vue

@@ -0,0 +1,35 @@
+<template>
+  <h2>Hot Module Replacement</h2>
+  <p>
+    <span>
+      HMR: click button and edit template part of <code>./TestHmr.vue</code>,
+      count should not reset
+    </span>
+    <button @click="count++">&gt;&gt;&gt; {{ count }} &lt;&lt;&lt;</button>
+  </p>
+  <p>
+    <span>
+      HMR: edit the return value of <code>foo()</code> in
+      <code>./testHmrPropagation.js</code>, should update without reloading
+      page:
+    </span>
+    <span>{{ foo() }}</span>
+  </p>
+  <p>
+    HMR: manual API (see console) - edit <code>./testHmrManual.js</code> and it
+    should log new exported value without reloading the page.
+  </p>
+</template>
+
+<script>
+import { foo } from "./testHmrPropagation";
+
+export default {
+  setup() {
+    return {
+      count: 0,
+      foo,
+    };
+  },
+};
+</script>

playground/TestJsonImport.vue

@@ -0,0 +1,11 @@
+<template>
+  <pre>Imported JSON: {{ json }}</pre>
+</template>
+
+<script>
+import json from './testJsonImport.json'
+
+export default {
+  data: () => ({ json })
+}
+</script>

playground/TestJsx.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2>JSX</h2>
+    <div ref="root"></div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import { renderPreact } from './testJsx.jsx'
+
+export default {
+  setup() {
+    const root = ref()
+
+    onMounted(() => {
+      renderPreact(root.value)
+    })
+
+    return { root }
+  }
+}
+</script>

playground/TestModuleResolve.vue

@@ -0,0 +1,31 @@
+<template>
+  <h2>Module Resolving</h2>
+  <div :class="router">vue-router@next {{ router }}</div>
+  <div :class="store">vuex@next {{ store }}</div>
+  <div :class="web_modules">web_modules {{ web_modules }}</div>
+</template>
+
+<script>
+import { createRouter } from "vue-router";
+import { createStore } from "vuex";
+import { dep } from "web-modules-dep";
+
+export default {
+  setup() {
+    return {
+      router: typeof createRouter === "function" ? "ok" : "error",
+      store: typeof createStore === "function" ? "ok" : "error",
+      web_modules: dep() ? "ok" : "error",
+    };
+  },
+};
+</script>
+
+<style scoped>
+.ok {
+  color: green;
+}
+.error {
+  color: red;
+}
+</style>

playground/TestPostCss.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2>PostCSS</h2>
+  <div class="postcss-from-css">
+    CSS import with PostCSS: This should be red
+  </div>
+  <div class="postcss-from-sfc">
+    &lt;style&gt; with PostCSS: This should be green
+  </div>
+</template>
+
+<script>
+import './testPostCss.css'
+export default {}
+</script>
+
+<style>
+body {
+  & .postcss-from-sfc {
+    color: green;
+  }
+}
+</style>

playground/TestPreprocessors.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+h2 Pre-Processors
+p.hello
+  | This is rendered from &lt;template lang="pug"&gt;
+  | and styled with &lt;style lang="sass"&gt;. It should be megenta.
+</template>
+
+<style lang="scss">
+$color: magenta;
+
+.hello {
+  color: $color;
+}
+</style>

playground/TestScopedCss.vue

@@ -0,0 +1,10 @@
+<template>
+  <h2>Scoped CSS</h2>
+  <div>&lt;style scoped&gt;: only this should be purple</div>
+</template>
+
+<style scoped>
+div {
+  color: #8A2BE2;
+}
+</style>

playground/TestTs.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+p {{ count }} {{ msg }}
+p
+  button(@click='count++') increment
+</template>
+
+<script lang="ts">
+import { foo } from './util'
+
+const log = (foo: string) => foo + Date.now()
+
+export default {
+  setup() {
+    return {
+      count: 0,
+      msg: foo() + log('ok!')
+    }
+  }
+}
+</script>

playground/index.html

@@ -0,0 +1,3 @@
+<link rel="icon" href="/public/icon.png" />
+<div id="app"></div>
+<script type="module" src="./main.js"></script>

playground/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './testHmrManual'
+
+createApp(App).mount('#app')

playground/package.json

@@ -0,0 +1,17 @@
+{
+  "scripts": {
+    "dev": "DEBUG=vite:* vite --jsx-factory=h",
+    "build": "DEBUG=vite:* vite build --jsx-factory=h",
+    "serve": "serve dist"
+  },
+  "dependencies": {
+    "preact": "^10.4.1",
+    "vue-router": "^4.0.0-alpha.9",
+    "vuex": "^4.0.0-beta.1"
+  },
+  "devDependencies": {
+    "postcss-nesting": "^7.0.1",
+    "pug": "^2.0.4",
+    "sass": "^1.26.3"
+  }
+}

playground/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nesting')]
+}

playground/testAssets.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/Inter-Italic.woff2") format("woff2"),
+       url("fonts/Inter-Italic.woff") format("woff");
+}

playground/testCssModules.module.css

@@ -0,0 +1,3 @@
+.turquoise {
+  color: #FF8C00;
+}

playground/testHmrManual.js

@@ -0,0 +1,9 @@
+import { hot } from '@hmr'
+
+export const foo = 1
+
+if (__DEV__) {
+  hot.accept(({ foo }) => {
+    console.log('foo is now: ', foo)
+  })
+}

playground/testHmrPropagation.js

@@ -0,0 +1,3 @@
+export function foo() {
+  return 1
+}

playground/testJsonImport.json

@@ -0,0 +1,3 @@
+{
+  "hello": "this is json"
+}

playground/testJsx.jsx

@@ -0,0 +1,11 @@
+import { h, render } from 'preact'
+import { Test } from './testTsx.tsx'
+
+const Component = () => <div>
+  Rendered from Preact JSX
+  <Test count={1337} />
+</div>
+
+export function renderPreact(el) {
+  render(h(Component), el)
+}

playground/testPostCss.css

@@ -0,0 +1,6 @@
+/* postcss-nesting */
+body {
+  & .postcss-from-css {
+    color: red;
+  }
+}

playground/testTsImport.ts

@@ -0,0 +1,6 @@
+import { baz } from './baz.js'
+
+export function foo(m: string) {
+  console.log('you crazy' + m)
+  return baz() + 'yo crazy'
+}

playground/testTsx.tsx

@@ -0,0 +1,5 @@
+import { h } from 'preact'
+
+export function Test(props: { count: 0 }) {
+  return <div>Rendered from TSX: count is {props.count}</div>
+}

playground/web_modules/web-modules-dep.js

@@ -0,0 +1,3 @@
+export function dep() {
+  return __DEV__
+}