feat(examples): added further examples

andrewcourtice · Mar 1, 2022 · 5251cfe · 5251cfe
1 parent 46efb38
commit 5251cfe
Show file tree

Hide file tree

Showing 20 changed files with 307 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -73,3 +73,5 @@ docs/public
 
 test-results.xml
 .vercel
+
+.reports
diff --git a/app/vite.config.ts b/app/vite.config.ts
@@ -4,7 +4,6 @@ import {
     defineConfig,
 } from 'vite';
 
-// https://vitejs.dev/config/
 export default defineConfig({
     server: {
         port: 6565,
@@ -13,8 +12,7 @@ export default defineConfig({
         stringify: true,
     },
     build: {
-        sourcemap: true,
-        cssCodeSplit: true,
+        sourcemap: 'hidden',
         commonjsOptions: {
             esmExternals: true,
         },

diff --git a/app/vue-shim.d.ts b/app/vue-shim.d.ts
@@ -1,9 +1,9 @@
 declare module '*.vue' {
     import type {
-        DefineComponent
+        DefineComponent,
     } from 'vue';
 
     const component: DefineComponent<{}, {}, any>;
-    
-    export default component
+
+    export default component;
 }
diff --git a/examples/nuxt/app.vue b/examples/nuxt/app.vue
diff --git a/examples/nuxt/nuxt.config.ts b/examples/nuxt/nuxt.config.ts
@@ -4,6 +4,7 @@ import {
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+    srcDir: 'src/',
     modules: [
         '@nuxtjs/harlem',
     ],

diff --git a/examples/nuxt/package.json b/examples/nuxt/package.json
@@ -1,17 +1,18 @@
 {
+    "name": "@harlem/example-nuxt",
     "private": true,
     "scripts": {
         "dev": "nuxi dev",
         "build": "nuxi build",
         "start": "node .output/server/index.mjs"
     },
-    "devDependencies": {
-        "nuxt3": "latest"
-    },
     "dependencies": {
-        "@harlem/extension-compose": "^2.2.3",
-        "@harlem/extension-reset": "^2.2.3",
-        "@harlem/extension-storage": "^2.2.3",
+        "@harlem/extension-compose": "^2.3.0",
+        "@harlem/extension-reset": "^2.3.0",
+        "@harlem/extension-storage": "^2.3.0",
         "@nuxtjs/harlem": "^1.0.1"
+    },
+    "devDependencies": {
+        "nuxt3": "latest"
     }
 }
diff --git a/examples/nuxt/src/app.vue b/examples/nuxt/src/app.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>Welcome {{ fullName }}</h1>
+        <input type="text" placeholder="First name" v-model="firstName">
+        <input type="text" placeholder="Last name" v-model="lastName">
+        <div>
+            <button @click="reset()">Reset</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {
+    reset,
+    fullName,
+    computeState,
+} from './store';
+
+const firstName = computeState(state => state.firstName);
+const lastName = computeState(state => state.lastName);
+</script>
diff --git a/examples/nuxt/store.ts → examples/nuxt/src/store.ts b/examples/nuxt/store.ts → examples/nuxt/src/store.ts
@@ -19,4 +19,6 @@ export const {
         }),
         resetExtension(), // order is important!
     ],
-});
+});
+
+export const fullName = getter('fullname', ({ firstName, lastName }) => `${firstName} ${lastName}`);
diff --git a/examples/vite-ts/README.md b/examples/vite-ts/README.md
@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
diff --git a/examples/vite-ts/index.html b/examples/vite-ts/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Harlem Example Vite + TS Application</title>
+    <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32"/>
+    <script type="module" src="/src/index.ts" defer></script>
+</head>
+
+<body>
+    <div id="app"></div>
+</body>
+
+</html>
diff --git a/examples/vite-ts/package.json b/examples/vite-ts/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "@harlem/example-vite-ts",
+    "private": true,
+    "scripts": {
+        "start": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@harlem/core": "^2.3.0",
+        "@harlem/extension-compose": "^2.3.0",
+        "@harlem/extension-reset": "^2.3.0",
+        "@harlem/extension-storage": "^2.3.0",
+        "@harlem/plugin-devtools": "^2.3.0",
+        "vue": "^3.2.31"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^2.2.4",
+        "vite": "^2.8.5"
+    }
+}
diff --git a/examples/vite-ts/public/favicon.png b/examples/vite-ts/public/favicon.png
diff --git a/examples/vite-ts/src/app.vue b/examples/vite-ts/src/app.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>Welcome {{ fullName }}</h1>
+        <input type="text" placeholder="First name" v-model="firstName">
+        <input type="text" placeholder="Last name" v-model="lastName">
+        <div>
+            <button @click="reset()">Reset</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {
+    reset,
+    fullName,
+    computeState,
+} from './store';
+
+const firstName = computeState(state => state.firstName);
+const lastName = computeState(state => state.lastName);
+</script>
diff --git a/examples/vite-ts/src/index.ts b/examples/vite-ts/src/index.ts
@@ -0,0 +1,20 @@
+import App from './app.vue';
+import Harlem from '@harlem/core';
+
+import harlemDevtoolsPlugin from '@harlem/plugin-devtools';
+
+import {
+    createApp,
+} from 'vue';
+
+function main() {
+    return createApp(App)
+        .use(Harlem, {
+            plugins: [
+                harlemDevtoolsPlugin(),
+            ],
+        })
+        .mount('#app');
+}
+
+main();
diff --git a/examples/vite-ts/src/store.ts b/examples/vite-ts/src/store.ts
@@ -0,0 +1,28 @@
+import composeExtension from '@harlem/extension-compose';
+import storageExtension from '@harlem/extension-storage';
+import resetExtension from '@harlem/extension-reset';
+
+import {
+    createStore,
+} from '@harlem/core';
+
+export const {
+    state,
+    getter,
+    reset,
+    computeState,
+} = createStore('app', {
+    firstName: 'John',
+    lastName: 'Smith',
+}, {
+    extensions: [
+        composeExtension(),
+        storageExtension({
+            prefix: 'vite-ts',
+            restore: true,
+        }),
+        resetExtension(), // order is important!
+    ],
+});
+
+export const fullName = getter('fullname', ({ firstName, lastName }) => `${firstName} ${lastName}`);
diff --git a/examples/vite-ts/tsconfig.json b/examples/vite-ts/tsconfig.json
@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "resolveJsonModule": true,
+        "types": [
+            "vite/client"
+        ]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.vue",
+        "vue-shim.d.ts"
+    ]
+}
diff --git a/examples/vite-ts/vite.config.ts b/examples/vite-ts/vite.config.ts
@@ -0,0 +1,22 @@
+import vuePlugin from '@vitejs/plugin-vue';
+
+import {
+    defineConfig,
+} from 'vite';
+
+export default defineConfig({
+    json: {
+        stringify: true,
+    },
+    build: {
+        commonjsOptions: {
+            esmExternals: true,
+        },
+    },
+    define: {
+        '__VUE_OPTIONS_API__': false,
+    },
+    plugins: [
+        vuePlugin(),
+    ],
+});
diff --git a/examples/vite-ts/vue-shim.d.ts b/examples/vite-ts/vue-shim.d.ts
@@ -0,0 +1,9 @@
+declare module '*.vue' {
+    import type {
+        DefineComponent,
+    } from 'vue';
+
+    const component: DefineComponent<{}, {}, any>;
+
+    export default component;
+}
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -4,15 +4,16 @@ import {
 
 export default defineConfig({
     test: {
-        environment: 'jsdom',
         watch: false,
+        environment: 'jsdom',
         outputFile: 'test-results.xml',
         reporters: [
             'verbose',
             'junit',
         ],
         coverage: {
             enabled: true,
+            reportsDirectory: './.reports/coverage',
             reporter: [
                 'text-summary',
             ],
Original file line number	Diff line number	Diff line change
Expand Up		@@ -73,3 +73,5 @@ docs/public

		test-results.xml
		.vercel

		.reports
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,6 @@ export const { @@
             }),
             resetExtension(), // order is important!
         ],
-    });
+    });
+    export const fullName = getter('fullname', ({ firstName, lastName }) => `${firstName} ${lastName}`);