Feature/app-template-vue-typescript (#1088)

* add app-template-vue-typescript * update test snap * update create-snowpack-app snap * update vue to 3.0 * reset create-snowpack-app.test.js.snap * update create-snowpack-app snap Co-authored-by: Fred K. Schott <[email protected]>
FredKSchott · Sep 26, 2020 · 2a94ff1 · 2a94ff1 · vercel · Sep 26, 2020
1 parent 96d1ee5
commit 2a94ff1
Show file tree

Hide file tree

Showing 28 changed files with 5,775 additions and 43 deletions.
diff --git a/create-snowpack-app/app-scripts-vue/tsconfig.base.json b/create-snowpack-app/app-scripts-vue/tsconfig.base.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2015",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": { "*": ["web_modules/.types/*"] },
+    "allowSyntheticDefaultImports": true,
+    "importsNotUsedAsValues": "error",
+    /* more strict checking for errors that per-file transpilers like `esbuild` would crash */
+    "isolatedModules": true,
+    /* noEmit - We only use TypeScript for type checking. */
+    "noEmit": true,
+    /* Additional Options */
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  }
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/.npmignore b/create-snowpack-app/app-template-vue-typescript/.npmignore
@@ -0,0 +1,3 @@
+.build
+build
+web_modules
diff --git a/create-snowpack-app/app-template-vue-typescript/README.md b/create-snowpack-app/app-template-vue-typescript/README.md
@@ -0,0 +1,26 @@
+# New Project
+
+> ✨ Bootstrapped with Create Snowpack App (CSA).
+
+## Available Scripts
+
+### npm start
+
+Runs the app in the development mode.
+Open http://localhost:8080 to view it in the browser.
+
+The page will reload if you make edits.
+You will also see any lint errors in the console.
+
+### npm test
+
+**⚠️ NOTE:** Vue 3 testing support is still in progress. This template does not ship with a test runner.
+
+### npm run build
+
+Builds the app for production to the `build/` folder.
+It correctly bundles Vue in production mode and optimizes the build for the best performance.
+
+### Q: What about Eject?
+
+No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
diff --git a/create-snowpack-app/app-template-vue-typescript/package.json b/create-snowpack-app/app-template-vue-typescript/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@snowpack/app-template-vue-typescript",
+  "version": "1.8.8",
+  "license": "MIT",
+  "keywords": [
+    "csa-template"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "snowpack dev",
+    "build": "snowpack build",
+    "type-check": "tsc",
+    "test": "echo \"Vue 3.0 test support is still in progress.\" && exit 1"
+  },
+  "dependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@snowpack/app-scripts-vue": "^1.8.4",
+    "@snowpack/plugin-vue": "^2.2.0",
+    "snowpack": "^2.10.0",
+    "typescript": "^4.0.2"
+  },
+  "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4"
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/public/favicon-32x32.png b/create-snowpack-app/app-template-vue-typescript/public/favicon-32x32.png
diff --git a/create-snowpack-app/app-template-vue-typescript/public/favicon.ico b/create-snowpack-app/app-template-vue-typescript/public/favicon.ico
diff --git a/create-snowpack-app/app-template-vue-typescript/public/index.html b/create-snowpack-app/app-template-vue-typescript/public/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Web site created using create-snowpack-app" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/_dist_/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/create-snowpack-app/app-template-vue-typescript/public/logo.svg b/create-snowpack-app/app-template-vue-typescript/public/logo.svg
diff --git a/create-snowpack-app/app-template-vue-typescript/public/robots.txt b/create-snowpack-app/app-template-vue-typescript/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/create-snowpack-app/app-template-vue-typescript/snowpack.config.json b/create-snowpack-app/app-template-vue-typescript/snowpack.config.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@snowpack/app-scripts-vue",
+  "plugins": ["@snowpack/plugin-vue/plugin-tsx-jsx.js"]
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/src/App.vue b/create-snowpack-app/app-template-vue-typescript/src/App.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="App">
+    <header class="App-header">
+      <img src="/logo.svg" class="App-logo" alt="logo" />
+      <p>
+        Edit
+        <code>src/App.vue</code> and save to reload.
+      </p>
+      <p class="App-tsx">
+        <FooTsxVue />
+        <FooTsx />
+        <BarJsxVue />
+        <BarJsx />
+      </p>
+      <a class="App-link" href="https://vuejs.org" target="_blank" rel="noopener noreferrer">{{
+        state.message
+      }}</a>
+    </header>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive} from 'vue';
+import FooTsxVue from './components/FooTsx.vue';
+import FooTsx from './components/Foo';
+import BarJsxVue from './components/BarJsx.vue';
+import BarJsx from './components/Bar';
+
+interface State {
+  message: string;
+}
+
+export default defineComponent({
+  components: {
+    FooTsxVue,
+    FooTsx,
+    BarJsxVue,
+    BarJsx,
+  },
+  setup() {
+    const state = reactive({
+      message: 'Learn Vue',
+    });
+    return {
+      state,
+    };
+  },
+});
+</script>
+
+<style>
+.App {
+  text-align: center;
+}
+.App-header {
+  background-color: #f9f6f6;
+  color: #32485f;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+.App-link {
+  color: #00c185;
+}
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+  margin-bottom: 1rem;
+  animation: App-logo-spin infinite 1.6s ease-in-out alternate;
+}
+.App-tsx {
+  display: flex;
+}
+.App-tsx > div {
+  margin-left: 30px;
+  font-size: 16px;
+}
+@keyframes App-logo-spin {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.06);
+  }
+}
+</style>
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/Bar.jsx b/create-snowpack-app/app-template-vue-typescript/src/components/Bar.jsx
@@ -0,0 +1,17 @@
+import {defineComponent, reactive} from 'vue';
+import styles from './Bar.module.css';
+
+export default defineComponent({
+  name: 'BarJsx',
+  setup() {
+    const state = reactive({
+      name: 'BarJsx',
+    });
+
+    return () => (
+      <>
+        <div className={styles['bar-jsx']}>{state.name}</div>
+      </>
+    );
+  },
+});
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/Bar.module.css b/create-snowpack-app/app-template-vue-typescript/src/components/Bar.module.css
@@ -0,0 +1,3 @@
+.bar-jsx {
+  color: red;
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/BarJsx.vue b/create-snowpack-app/app-template-vue-typescript/src/components/BarJsx.vue
@@ -0,0 +1,25 @@
+<script lang="jsx">
+import {defineComponent, reactive} from 'vue';
+
+export default defineComponent({
+  name: 'BarJsxVue',
+  setup() {
+    const state = reactive({
+      name: 'BarJsxVue',
+    });
+
+    return () => (
+      <>
+        <div className="bar-jsx-vue">{state.name}</div>
+      </>
+    );
+  },
+});
+</script>
+
+<style lang="css">
+/* unsupport scoped css in vue with tsx, jsx*/
+.bar-jsx-vue {
+  color: red;
+}
+</style>
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/Foo.module.css b/create-snowpack-app/app-template-vue-typescript/src/components/Foo.module.css
@@ -0,0 +1,3 @@
+.foo-tsx {
+    color: green;
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/Foo.tsx b/create-snowpack-app/app-template-vue-typescript/src/components/Foo.tsx
@@ -0,0 +1,21 @@
+import {defineComponent, reactive} from 'vue';
+import styles from './Foo.module.css';
+
+interface State {
+  name: string;
+}
+
+export default defineComponent({
+  name: 'FooTsx',
+  setup() {
+    const state = reactive<State>({
+      name: 'FooTsx',
+    });
+
+    return () => (
+      <>
+        <div className={styles['foo-tsx']}>{state.name}</div>
+      </>
+    );
+  },
+});
diff --git a/create-snowpack-app/app-template-vue-typescript/src/components/FooTsx.vue b/create-snowpack-app/app-template-vue-typescript/src/components/FooTsx.vue
@@ -0,0 +1,29 @@
+<script lang="tsx">
+import {defineComponent, reactive} from 'vue';
+
+interface State {
+  name: string;
+}
+
+export default defineComponent({
+  name: 'FooTsxVue',
+  setup() {
+    const state = reactive<State>({
+      name: 'FooTsxVue',
+    });
+
+    return () => (
+      <>
+        <div className="foo-tsx-vue">{state.name}</div>
+      </>
+    );
+  },
+});
+</script>
+
+<style lang="css">
+/* unsupport scoped css in vue with tsx, jsx*/
+.foo-tsx-vue {
+  color: green;
+}
+</style>
diff --git a/create-snowpack-app/app-template-vue-typescript/src/index.js b/create-snowpack-app/app-template-vue-typescript/src/index.js
@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.mount("#app");
+
+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
+// Learn more: https://www.snowpack.dev/#hot-module-replacement
+if (import.meta.hot) {
+  import.meta.hot.accept();
+  import.meta.hot.dispose(() => {
+    app.unmount();
+  });
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/tsconfig.json b/create-snowpack-app/app-template-vue-typescript/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "include": ["src", "types"],
+  "exclude": ["node_modules"],
+  "extends": "@snowpack/app-scripts-vue/tsconfig.base.json",
+  "compilerOptions": {
+    // You can't currently define paths in your 'extends' config,
+    // so we have to set 'baseUrl' & 'paths' here.
+    // Don't change these unless you know what you're doing.
+    // See: https://github.com/microsoft/TypeScript/issues/25430
+    "baseUrl": "./",
+    /* more strict checking for errors that per-file transpilers like `esbuild` would crash */
+    "isolatedModules": true,
+    "paths": { "*": ["web_modules/.types/*"] }
+    // Feel free to add/edit new config options below:
+    // ...
+  }
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/types/shims-vue.d.ts b/create-snowpack-app/app-template-vue-typescript/types/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
+}
diff --git a/create-snowpack-app/app-template-vue-typescript/types/static.d.ts b/create-snowpack-app/app-template-vue-typescript/types/static.d.ts
@@ -0,0 +1,32 @@
+/* Use this file to declare any custom file extensions for importing */
+/* Use this folder to also add/extend a package d.ts file, if needed. */
+
+declare module '*.css';
+declare module '*.svg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.bmp' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.gif' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.jpg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.jpeg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.png' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.webp' {
+  const ref: string;
+  export default ref;
+}