create-oc 0.0.6 → 0.0.7

package/index.js

@@ -21,6 +21,7 @@ const { componentName, template } = await prompts([
       { title: 'React', value: 'react' },
       { title: 'Solid', value: 'solid' },
       { title: 'Preact', value: 'preact' },
+      { title: 'Vue', value: 'vue' },
       { title: 'Elm', value: 'elm' },
     ],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-oc",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -8,6 +8,7 @@
     "create-oc": "./index.js"
   },
   "scripts": {
+    "build": "node copy-scaffolds.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

package/templates/solid/package.json

@@ -34,7 +34,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "jsdom": "^21.1.1",
     "oc-server": "*",
-    "oc-template-solid-compiler": "^0.6.0",
+    "oc-template-solid-compiler": "*",
     "solid-js": "^1.8.7",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

package/templates/vue/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "base-component-solid",
+  "description": "",
+  "version": "1.0.0",
+  "scripts": {
+    "lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx src",
+    "build": "tsc --noEmit && oc package .",
+    "test": "vitest"
+  },
+  "oc": {
+    "files": {
+      "data": "src/server.ts",
+      "template": {
+        "src": "src/App.vue",
+        "type": "oc-template-vue"
+      },
+      "static": [
+        "public"
+      ]
+    },
+    "parameters": {
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "jsdom": "^21.1.1",
+    "oc-server": "*",
+    "oc-template-vue-compiler": "*",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7",
+    "vue": "^3.3.11",
+    "vue-tsc": "^1.8.25"
+  }
+}

package/templates/vue/src/App.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import logo from '../public/logo.png';
+import { serverClient, ActionOutput } from 'oc-server'
+const props = defineProps<{ userId: number, firstName: string, lastName: string }>()
+
+const additionalData = ref<ActionOutput<'getMoreData'> | null>(null);
+async function getAdditionalData() {
+  additionalData.value = await serverClient.getMoreData({ userId: props.userId });
+}
+</script>
+
+<template>
+  <div className="container">
+    <img width="50" height="50" v-bind:src="logo" alt="Logo" />
+
+    <h1>
+      Hello, <span>{{ firstName }}</span> {{ lastName }}
+    </h1>
+    <div className={styles.info} v-if="additionalData">
+      <div className={styles.block}>Age: {{ additionalData.age }}</div>
+      <div className={styles.block}>
+        Hobbies:
+        <span v-for="hobby in additionalData.hobbies" :key="hobby">
+          {{ hobby.toLowerCase() }}
+        </span>
+      </div>
+    </div>
+    <button className="button" @click="getAdditionalData">
+      Get extra information
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  background-color: #3b246c;
+  color: #fff;
+  font-family: sans-serif;
+  padding: 40px;
+}
+
+.button {
+  background-color: #a97613;
+  border: none;
+  padding: 15px 32px;
+  text-align: center;
+  font-size: 16px;
+  text-decoration: none;
+  display: inline-block;
+  color: inherit;
+  cursor: pointer;
+}
+
+h1 {
+  margin: 0 0 20px 0;
+}
+
+span {
+  text-decoration: underline;
+}
+</style>

package/templates/vue/src/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/templates/vue/src/oc-app.d.ts

@@ -0,0 +1 @@
+/// <reference types="oc-vite/client" />

package/templates/vue/src/server.ts

@@ -0,0 +1,36 @@
+import { Server } from 'oc-server';
+import { ClientProps, OcParameters } from './types';
+
+const database = [
+  { name: 'John Doe', age: 34, hobbies: ['Swimming', 'Basketball'] },
+  { name: 'Jane Doe', age: 35, hobbies: ['Running', 'Rugby'] }
+];
+
+async function getUser(userId: number) {
+  return database[userId];
+}
+
+export const server = new Server(async (params: OcParameters): Promise<ClientProps> => {
+  const { userId } = params;
+  const user = await getUser(userId);
+
+  const [firstName, lastName] = user.name.split(/\s+/);
+  return {
+    userId,
+    firstName,
+    lastName
+  };
+}).action('getMoreData', async (params: OcParameters) => {
+  const { userId } = params;
+  const user = await getUser(userId);
+  return {
+    age: user.age,
+    hobbies: user.hobbies
+  };
+});
+
+declare module 'oc-server' {
+  interface Register {
+    server: typeof server;
+  }
+}

package/templates/vue/src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/templates/vue/src/styles.css

@@ -0,0 +1,30 @@
+.container {
+  background-color: #3b246c;
+  color: #fff;
+  font-family: sans-serif;
+  padding: 40px;
+}
+
+.button {
+  background-color: #a97613;
+  border: none;
+  padding: 15px 32px;
+  text-align: center;
+  font-size: 16px;
+  text-decoration: none;
+  display: inline-block;
+  color: inherit;
+  cursor: pointer;
+}
+
+.info {
+  margin-bottom: 20px;
+}
+
+.block {
+  margin: 6px 0;
+}
+
+.button:hover {
+  background-color: #c79535;
+}

package/templates/vue/src/types.ts

@@ -0,0 +1,15 @@
+export interface OcParameters {
+  userId: number;
+  getMoreData?: boolean;
+}
+
+export interface AdditionalData {
+  hobbies: string[];
+  age: number;
+}
+
+export interface ClientProps extends Partial<AdditionalData> {
+  userId: number;
+  firstName: string;
+  lastName: string;
+}

package/templates/vue/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    // These are suggested values and will be set when not present in the
+    // tsconfig.json
+    // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // These values are required and cannot be changed by the user
+    // Keep this in sync with the rollup config
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/_package"]
+}

package/templates/vue/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // Add your own plugins here for thinkgs like eslint or typecheckers
+  plugins: [],
+  // @ts-ignore Missing test property
+  test: {
+    environment: 'jsdom'
+  }
+});