create-oc 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-oc",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "description": "",
   "main": "index.js",

package/templates/elm/package.json

@@ -7,9 +7,12 @@
     "files": {
       "data": "src/server.ts",
       "template": {
-        "src": "src/Main.elm",
+        "src": "src/index.js",
         "type": "oc-template-elm"
-      }
+      },
+      "static": [
+        "public"
+      ]
     },
     "parameters": {
       "userId": {
@@ -23,9 +26,9 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "oc-server": "*",
-    "oc-template-elm-compiler": "*",
-    "elm": "*",
-    "typescript": "*"
+    "oc-server": "^0.3.0",
+    "oc-template-elm-compiler": "^0.3.0",
+    "elm": "^0.19.1-6",
+    "typescript": "^5.3.3"
   }
 }

package/templates/elm/src/Main.elm

@@ -28,18 +28,20 @@ main =
 
 
 type alias Model =
-    { userId : Int, name : String, email : String, age : Maybe Int }
+    { staticPath: String, firstName : String, lastName : String, born : Int, hobbies : List String, funFact: Maybe String }
+
+type alias FactModel =
+    { funFact: String }
 
 
 type alias DataRequest =
-    { userId : Int }
+    { year : Int }
 
 
 encode : DataRequest -> E.Value
 encode data =
     E.object
-        [ ( "userId", E.int data.userId )
-        , ( "moreData", E.bool True )
+        [ ( "year", E.int data.year )
         ]
 
 
@@ -50,7 +52,7 @@ init flags =
             model
 
         Err _ ->
-            { name = "", email = "", userId = 0, age = Nothing }
+            { staticPath = "", firstName = "", lastName = "", born = 0, hobbies = [], funFact = Nothing }
     , Cmd.none
     )
 
@@ -70,111 +72,98 @@ isJust data =
 
 
 type Msg
-    = GetData
+    = GetFunFact
     | Recv E.Value
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        GetData ->
-            ( model, DataRequest model.userId |> encode |> getData )
+        GetFunFact ->
+            ( model, DataRequest model.born |> encode |> askFunFact )
 
         Recv data ->
-            ( case D.decodeValue decoder data of
+            ( case D.decodeValue factDecoder data of
                 Ok newModel ->
-                    newModel
+                    { model | funFact = Just newModel }
 
                 Err _ ->
-                    { name = "", email = "", userId = 0, age = Nothing }
+                    { staticPath = "", firstName = "", lastName = "", born = 0, hobbies = [], funFact = Nothing }
             , Cmd.none
             )
 
-
-
 -- VIEW
 
-
-inputStyle : Style
-inputStyle =
-    Css.batch
-        [ border3 (px 5) solid (rgb 255 240 255)
-        , boxShadow5 inset zero zero (px 8) (rgba 0 0 0 0.1)
-        , padding (px 15)
-        , backgroundColor (rgba 255 255 255 0.5)
-        , margin (px 10)
-        ]
-
-
-htmlIf : Html msg -> Bool -> Html msg
-htmlIf el cond =
-    if cond then
-        el
-
-    else
-        text ""
-
-
 view : Model -> Html Msg
 view model =
-    div
-        [ css
-            [ padding (px 20)
+    div [ css 
+            [ backgroundColor (hex "3b246c")
+            , color (hex "fff")
+            , fontFamilies [ "sans-serif" ]
+            , padding (px 40)
             ]
         ]
-        [ input
-            [ css [ inputStyle ]
-            , type_ "text"
-            , placeholder "Name"
-            , value model.name
-            ]
-            []
-        , input
-            [ css [ inputStyle ]
-            , type_ "text"
-            , placeholder "Email"
-            , value model.email
+        [ img [ Html.Styled.Attributes.width 50, Html.Styled.Attributes.height 50, src (model.staticPath ++ "public/logo.png"), alt "Logo" ] []
+        , h1 [ css [ margin4 (px 0) (px 0) (px 20) (px 0) ] ]
+            [ text ("Hello, ") 
+            , span [ css [ textDecoration underline ] ] [text (model.firstName)]
+            , text( " " ++ model.lastName ) ]
+        , div [ css [ marginBottom (px 20) ] ]
+            [ div [ css [ margin2 (px 6) (px 0) ] ] [ text ("Born: " ++ String.fromInt model.born) ]
+            , div [ css [ margin2 (px 6) (px 0) ] ] [ text ("Hobbies: " ++ String.join ", " (List.map String.toLower model.hobbies)) ]
             ]
-            []
-        , case model.age of
+        , case model.funFact of
             Nothing ->
                 text ""
 
-            Just age ->
-                input
-                    [ css [ inputStyle ]
-                    , type_ "number"
-                    , placeholder "Age"
-                    , String.fromInt age |> value
-                    ]
-                    []
-        , button [ onClick GetData ] [ text "Get more data" ]
+            Just fact ->
+                div [] [text (fact)]
+        , button [ css 
+                      [ backgroundColor (hex "a97613")
+                      , border (px 0)
+                      , padding2 (px 15) (px 32)
+                      , textAlign center
+                      , fontSize (px 16)
+                      , textDecoration none
+                      , display inlineBlock
+                      , color inherit
+                      , cursor pointer
+                      ]
+                  , onClick GetFunFact
+                  ]
+                  [ text "Fun year fact" ]
+                      
         ]
 
 
-
 -- SUBSCRIPTIONS
 
 
 subscriptions : Model -> Sub Msg
 subscriptions _ =
-    dataReceiver Recv
+    getFunFact Recv
 
 
 decoder : D.Decoder Model
 decoder =
-    D.map4 Model
-        (D.field "userId" D.int)
-        (D.field "name" D.string)
-        (D.field "email" D.string)
-        (D.maybe (D.field "age" D.int))
+    D.map6 Model
+        (D.field "staticPath" D.string)
+        (D.field "firstName" D.string)
+        (D.field "lastName" D.string)
+        (D.field "born" D.int)
+        (D.field "hobbies" (D.list D.string))
+        (D.maybe (D.field "funFact" D.string))
 
+-- decoder of a single string field
+factDecoder : D.Decoder String
+factDecoder =
+    D.field "funFact" D.string
 
 
 -- PORTS
 
 
-port getData : E.Value -> Cmd msg
+port askFunFact : E.Value -> Cmd msg
 
 
-port dataReceiver : (E.Value -> msg) -> Sub msg
+port getFunFact : (E.Value -> msg) -> Sub msg

package/templates/elm/src/index.js

@@ -0,0 +1,12 @@
+import { serverClient } from 'oc-server';
+import { Elm } from './Main.elm';
+
+export default {
+  js: (app) => {
+    app.ports.askFunFact.subscribe(async (params) => {
+      const data = await serverClient.funFact(params);
+      app.ports.getFunFact.send(data);
+    });
+  },
+  program: Elm.Main,
+};

package/templates/elm/src/server.ts

@@ -1,22 +1,51 @@
 import { Server } from 'oc-server';
 
-const database = [
-  { name: 'John Doe', email: 'john@doe.com', age: 32 },
-  { name: 'Jane Doe', email: 'jane@doe.com', age: 31 }
+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: { userId: number; moreData?: boolean }) => {
-  const { moreData, userId } = params;
-  const { email, name, age } = await getUser(userId);
+export const server = new Server(async (params: { userId: number }, ctx) => {
+  const { userId } = params;
+  const user = await getUser(userId);
+  const [firstName, lastName] = user.name.split(/\s+/);
+
+  if (firstName === 'Invalid') {
+    return;
+  }
 
   return {
-    userId,
-    name,
-    email,
-    age: moreData && age
+    firstName,
+    lastName,
+    born: user.born,
+    hobbies: user.hobbies,
+    staticPath: ctx.staticPath,
+  };
+}).action('funFact', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
+
+  return {
+    funFact,
   };
 });
+
+declare module 'oc-server' {
+  interface Register {
+    server: typeof server;
+  }
+}

package/templates/es6/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Tobermory.es6-string-html"]
+}

package/templates/es6/package.json

@@ -4,28 +4,27 @@
   "version": "1.0.0",
   "oc": {
     "files": {
-      "data": "server.js",
+      "data": "src/server.ts",
       "static": [
-        "img",
-        "css"
+        "public"
       ],
       "template": {
-        "src": "view.js",
+        "src": "src/view.ts",
         "type": "oc-template-es6"
       }
     },
     "parameters": {
-      "name": {
-        "default": "Jane Doe",
-        "description": "Your name",
-        "example": "Jane Doe",
-        "mandatory": false,
-        "type": "string"
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
       }
     }
   },
   "devDependencies": {
-    "oc-server": "*",
-    "oc-template-es6-compiler": "*"
+    "oc-server": "^0.3.0",
+    "oc-template-es6-compiler": "^4.0.3"
   }
 }

package/templates/es6/src/server.ts

@@ -0,0 +1,50 @@
+import { Server } from 'oc-server';
+
+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 userDatabase[userId];
+}
+
+async function getFunFact(year: number) {
+  return yearsFunFactDatabase[year];
+}
+
+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 {
+    firstName,
+    lastName,
+    born: user.born,
+    hobbies: user.hobbies,
+  };
+}).action('funFact', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
+
+  return {
+    funFact,
+  };
+});
+
+declare module 'oc-server' {
+  interface Register {
+    server: typeof server;
+  }
+}

package/templates/es6/src/view.ts

@@ -0,0 +1,33 @@
+import { InitialData, serverClient } from 'oc-server';
+import styles from './styles.css';
+import logo from '../public/logo.png';
+
+declare const window: Window & {
+  getFunFact: () => Promise<void>;
+};
+
+export default ({ firstName, lastName, hobbies, born }: InitialData) => {
+  window.getFunFact = async () => {
+    const { funFact } = await serverClient.funFact({ year: born });
+    document.querySelector('#funfact')!.innerHTML = funFact;
+  };
+
+  return /* html */ `
+    <div class="${styles.container}">
+      <img width="50" height="50" src="${logo}" alt="Logo" />
+      <h1 style="margin: 0 0 20px 0;">
+        Hello, <span style="text-decoration: underline;">${firstName}</span> ${lastName}
+      </h1>
+      <div class=${styles.info}>
+        <div class=${styles.block}>Born: ${born}</div>
+        <div class=${styles.block}>
+          <div>Hobbies: ${hobbies.map((x) => x.toLowerCase()).join(', ')}</div>
+        </div>
+      </div>
+      <div id="funfact"></div>
+      <button class=${styles.button} onclick="getFunFact()">
+        Fun year fact
+      </button>
+    </div>
+  `;
+};

package/templates/preact/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "base-component-react",
+  "name": "base-component-preact",
   "description": "",
   "version": "1.0.0",
   "scripts": {
@@ -30,11 +30,12 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@preact/preset-vite": "^2.7.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "jsdom": "^21.1.1",
-    "oc-server": "*",
-    "oc-template-preact-compiler": "0.2.0",
+    "oc-server": "^0.3.0",
+    "oc-template-preact-compiler": "^0.4.1",
     "preact": "^10.13.2",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

package/templates/preact/src/App.tsx

@@ -1,23 +1,21 @@
 import { useState } from 'preact/hooks';
-import { useData } from 'oc-template-preact-compiler/dist/utils/useData';
-import { serverClient } from 'oc-server';
+import { ActionOutput, InitialData, serverClient } from 'oc-server';
 import styles from './styles.css';
-import type { AdditionalData, ClientProps } from './types';
+import logo from '../public/logo.png';
 
-interface AppProps extends ClientProps {
-  getMoreData?: boolean;
-}
+type AdditionalData = ActionOutput<'funFact'>;
 
-const App = () => {
-  const { firstName, lastName, userId, getData, getSetting } = useData<AppProps>();
-  const staticPath = getSetting('staticPath');
-  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(null);
+const App = (props: InitialData) => {
+  const { firstName, lastName, born, hobbies } = props;
+  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(
+    null
+  );
   const [error, setError] = useState('');
 
-  const fetchMoreData = async () => {
+  const getFunFact = async () => {
     setError('');
     try {
-      const data = await serverClient.getMoreData({ userId });
+      const data = await serverClient.funFact({ year: born });
       setAdditionalData(data);
     } catch (err) {
       setError(String(err));
@@ -30,20 +28,20 @@ const App = () => {
 
   return (
     <div className={styles.container}>
-      <img width="50" height="50" src={`${staticPath}/public/logo.png`} alt="Logo" />
+      <img width="50" height="50" src={logo} alt="Logo" />
       <h1 style={{ margin: '0 0 20px 0' }}>
-        Hello, <span style={{ textDecoration: 'underline' }}>{firstName}</span> {lastName}
+        Hello, <span style={{ textDecoration: 'underline' }}>{firstName}</span>{' '}
+        {lastName}
       </h1>
-      {additionalData && (
-        <div className={styles.info}>
-          <div className={styles.block}>Age: {additionalData.age}</div>
-          <div className={styles.block}>
-            Hobbies: {additionalData.hobbies.map((x) => x.toLowerCase()).join(', ')}
-          </div>
+      <div className={styles.info}>
+        <div className={styles.block}>Born: {born}</div>
+        <div className={styles.block}>
+          Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
         </div>
-      )}
-      <button className={styles.button} onClick={fetchMoreData}>
-        Get extra information
+      </div>
+      {additionalData && <div>{additionalData.funFact}</div>}
+      <button className={styles.button} onClick={getFunFact}>
+        Fun year fact
       </button>
     </div>
   );

package/templates/preact/src/server.ts

@@ -1,30 +1,45 @@
 import { Server } from 'oc-server';
-import { AdditionalData, 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> => {
-  const user = await getUser(params.userId);
+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: params.userId,
     firstName,
-    lastName
+    lastName,
+    born: user.born,
+    hobbies: user.hobbies,
   };
-}).action('getMoreData', async (params: OcParameters): Promise<AdditionalData> => {
-  const user = await getUser(params.userId);
+}).action('funFact', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
 
   return {
-    age: user.age,
-    hobbies: user.hobbies
+    funFact,
   };
 });
 

package/templates/preact/tsconfig.json

@@ -20,7 +20,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
   },
   "include": ["src"],
   "exclude": ["src/_package"]

package/templates/react/package.json

@@ -34,8 +34,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "jsdom": "^21.1.1",
-    "oc-server": "*",
-    "oc-template-react-compiler": "^6.0.0",
+    "oc-server": "^0.3.0",
+    "oc-template-react-compiler": "^6.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3",

package/templates/react/src/App.tsx

@@ -3,7 +3,7 @@ import { serverClient, InitialData, ActionOutput } from 'oc-server';
 import styles from './styles.css';
 import logo from '../public/logo.png';
 
-type AdditionalData = ActionOutput<'getMoreData'>;
+type AdditionalData = ActionOutput<'funFact'>;
 
 const App: React.FC<InitialData> = (props: InitialData) => {
   const { firstName, lastName, born, hobbies } = props;
@@ -12,10 +12,10 @@ const App: React.FC<InitialData> = (props: InitialData) => {
   );
   const [error, setError] = useState('');
 
-  const fetchMoreData = async () => {
+  const getFunFact = async () => {
     setError('');
     try {
-      const data = await serverClient.getMoreData({ year: born });
+      const data = await serverClient.funFact({ year: born });
       setAdditionalData(data);
     } catch (err) {
       setError(String(err));
@@ -40,7 +40,7 @@ const App: React.FC<InitialData> = (props: InitialData) => {
         </div>
       </div>
       {additionalData && <div>{additionalData.funFact}</div>}
-      <button className={styles.button} onClick={fetchMoreData}>
+      <button className={styles.button} onClick={getFunFact}>
         Fun year fact
       </button>
     </div>

package/templates/react/src/server.ts

@@ -34,7 +34,7 @@ export const server = new Server(async (params: { userId: number }) => {
     born: user.born,
     hobbies: user.hobbies,
   };
-}).action('getMoreData', async (params: { year: number }) => {
+}).action('funFact', async (params: { year: number }) => {
   const { year } = params;
   const funFact = await getFunFact(year);
 

package/templates/solid/package.json

@@ -33,8 +33,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.5",
     "jsdom": "^21.1.1",
-    "oc-server": "*",
-    "oc-template-solid-compiler": "*",
+    "oc-server": "^0.3.0",
+    "oc-template-solid-compiler": "^0.7.0",
     "solid-js": "^1.8.7",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

package/templates/solid/src/App.tsx

@@ -1,21 +1,18 @@
 import { createSignal, Show, For } from 'solid-js';
-import { useData } from 'oc-template-solid-compiler/dist/utils/useData';
-import { serverClient } from 'oc-server';
+import { serverClient, InitialData, ActionOutput } from 'oc-server';
 import styles from './styles.css';
-import type { AdditionalData, ClientProps } from './types';
+import logo from '../public/logo.png';
 
-interface AppProps extends ClientProps {
-  getMoreData?: boolean;
-}
+type AdditionalData = ActionOutput<'funFact'>;
 
-const App = () => {
-  const { firstName, lastName, userId, getSetting } = useData<AppProps>();
-  const staticPath = getSetting('staticPath');
-  const [additionalData, setAdditionalData] = createSignal<AdditionalData | null>(null);
+const App = (props: InitialData) => {
+  const { firstName, lastName, born, hobbies } = props;
+  const [additionalData, setAdditionalData] =
+    createSignal<AdditionalData | null>(null);
   const [error, setError] = createSignal('');
 
   async function handleClick() {
-    const data = await serverClient.getMoreData({ userId });
+    const data = await serverClient.funFact({ year: born });
 
     try {
       setAdditionalData(data);
@@ -27,20 +24,23 @@ const App = () => {
   return (
     <Show when={!error()} fallback={<div>Something wrong happened!</div>}>
       <div class={styles.container}>
-        <img width="50" height="50" src={`${staticPath}/public/logo.png`} alt="Logo" />
+        <img width="50" height="50" src={logo} alt="Logo" />
         <h1 style={{ margin: '0 0 20px 0' }}>
-          Hello, <span style={{ 'text-decoration': 'underline' }}>{firstName}</span> {lastName}
+          Hello,{' '}
+          <span style={{ 'text-decoration': 'underline' }}>{firstName}</span>{' '}
+          {lastName}
         </h1>
-        <Show when={!!additionalData()}>
-          <div class={styles.info}>
-            <div class={styles.block}>Age: {additionalData()!.age}</div>
-            <div class={styles.block}>
-              Hobbies: <For each={additionalData()!.hobbies}>{(hobby) => <div>{hobby}</div>}</For>
-            </div>
+        <div class={styles.info}>
+          <div class={styles.block}>Born: {born}</div>
+          <div class={styles.block}>
+            Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
           </div>
+        </div>
+        <Show when={additionalData()}>
+          <div>{additionalData()!.funFact}</div>
         </Show>
         <button class={styles.button} onClick={handleClick}>
-          Get extra information
+          Fun year fact
         </button>
       </div>
     </Show>

package/templates/solid/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,
   };
 });
 

package/templates/vue/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/templates/vue/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/templates/vue/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,
   };
 });
 

package/templates/es6/css/styles.css

@@ -1,3 +0,0 @@
-.awesome {
-  background: palevioletred;
-}

package/templates/es6/server.ts

@@ -1,11 +0,0 @@
-import { Server } from "oc-server";
-
-export const server = new Server((params: { name: string }, context) => {
-  const { name } = params;
-  const { staticPath } = context;
-
-  return {
-    name,
-    staticPath,
-  };
-});

package/templates/es6/view.ts

@@ -1,10 +0,0 @@
-import logo from "./img/logo.png";
-import styles from "./css/styles.css";
-
-export default (props: { name: string }) => {
-  console.log("PR::", props);
-  return `<div class=${styles.awesome}>
-    Hello ${props.name}!
-    <img src="${logo}" />
-  </div>`;
-};

package/templates/preact/src/types.ts

@@ -1,15 +0,0 @@
-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/solid/src/types.ts

@@ -1,15 +0,0 @@
-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/src/types.ts

@@ -1,15 +0,0 @@
-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;
-}