oc-template-vue-compiler 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-vue-compiler",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Compiler for the vueJS OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
     "oc-template-vue": "^0.1.0",
-    "oc-vite-compiler": "^3.5.0"
+    "oc-vite-compiler": "^3.5.4"
   },
   "files": [
     "dist/**",

package/scaffold/src/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "base-component-solid",
+  "name": "base-component-vue",
   "description": "",
   "version": "1.0.0",
   "scripts": {
@@ -33,8 +33,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-vue": "^5.0.0",
     "jsdom": "^21.1.1",
-    "oc-server": "*",
-    "oc-template-vue-compiler": "*",
+    "oc-server": "^0.3.0",
+    "oc-template-vue-compiler": "^0.2.0",
     "typescript": "5.0.2",
     "vitest": "^0.29.7",
     "vue": "^3.3.11",

package/scaffold/src/src/App.vue

@@ -2,12 +2,13 @@
 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 props = defineProps<{ firstName: string, lastName: string, born: number, hobbies: string[] }>()
 
-const additionalData = ref<ActionOutput<'getMoreData'> | null>(null);
-async function getAdditionalData() {
-  additionalData.value = await serverClient.getMoreData({ userId: props.userId });
+const additionalData = ref<ActionOutput<'funFact'> | null>(null);
+async function getFunFact() {
+  additionalData.value = await serverClient.funFact({ year: props.born });
 }
+const hobbies = props.hobbies.map((x) => x.toLowerCase()).join(', ')
 </script>
 
 <template>
@@ -17,17 +18,15 @@ async function getAdditionalData() {
     <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 className="info">
+      <div className="block">Born: {{ born }}</div>
+      <div className="block">
+        Hobbies: {{ hobbies }}
       </div>
     </div>
-    <button className="button" @click="getAdditionalData">
-      Get extra information
+    <div v-if="additionalData">{{ additionalData?.funFact }}</div>
+    <button className="button" @click="getFunFact">
+      Fun year fact
     </button>
   </div>
 </template>
@@ -52,6 +51,10 @@ async function getAdditionalData() {
   cursor: pointer;
 }
 
+.button:hover {
+  background-color: #c79535;
+}
+
 h1 {
   margin: 0 0 20px 0;
 }
@@ -59,4 +62,12 @@ h1 {
 span {
   text-decoration: underline;
 }
+
+.info {
+  margin-bottom: 20px;
+}
+
+.block {
+  margin: 6px 0;
+}
 </style>

package/scaffold/src/src/server.ts

@@ -1,31 +1,45 @@
 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'] }
+const userDatabase = [
+  { name: 'John Doe', born: 1986, hobbies: ['Swimming', 'Basketball'] },
+  { name: 'Jane Doe', born: 1991, hobbies: ['Running', 'Rugby'] },
 ];
 
+const yearsFunFactDatabase: Record<number, string> = {
+  1986: "Halley's Comet made its closest approach to Earth in 1986, visible to the naked eye.",
+  1987: 'The first Final Fantasy game was released in 1987.',
+  1991: 'The first web page was created in 1991 by Tim Berners-Lee.',
+};
+
 async function getUser(userId: number) {
-  return database[userId];
+  return userDatabase[userId];
+}
+
+async function getFunFact(year: number) {
+  return yearsFunFactDatabase[year];
 }
 
-export const server = new Server(async (params: OcParameters): Promise<ClientProps> => {
+export const server = new Server(async (params: { userId: number }) => {
   const { userId } = params;
   const user = await getUser(userId);
-
   const [firstName, lastName] = user.name.split(/\s+/);
+
+  if (firstName === 'Invalid') {
+    return;
+  }
+
   return {
-    userId,
     firstName,
-    lastName
+    lastName,
+    born: user.born,
+    hobbies: user.hobbies,
   };
-}).action('getMoreData', async (params: OcParameters) => {
-  const { userId } = params;
-  const user = await getUser(userId);
+}).action('funFact', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
+
   return {
-    age: user.age,
-    hobbies: user.hobbies
+    funFact,
   };
 });