oc-template-vue-compiler 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 OpenComponents community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# oc-template-vue-compiler - Compiler module
+
+OC template to compile components of type `oc-template-vue`

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/compile';
+export * from 'oc-template-vue';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/compile"), exports);
+__exportStar(require("oc-template-vue"), exports);

package/dist/lib/compile.d.ts

@@ -0,0 +1 @@
+export declare const compile: (options: import("oc-generic-template-compiler").CompilerOptions, callback: (err: Error | null, data: unknown) => void) => void;

package/dist/lib/compile.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compile = void 0;
+const oc_template_vue_1 = require("oc-template-vue");
+const plugin_vue_1 = __importDefault(require("@vitejs/plugin-vue"));
+const oc_vite_compiler_1 = require("oc-vite-compiler");
+const vueOCProviderTemplate_1 = __importDefault(require("./vueOCProviderTemplate"));
+exports.compile = (0, oc_vite_compiler_1.createCompile)({
+    plugins: [(0, plugin_vue_1.default)()],
+    viewWrapper: vueOCProviderTemplate_1.default,
+    getInfo: oc_template_vue_1.getInfo
+});

package/dist/lib/solidOCProviderTemplate.d.ts

@@ -0,0 +1,3 @@
+export default function solidOCProviderTemplate({ viewPath }: {
+    viewPath: string;
+}): string;

package/dist/lib/solidOCProviderTemplate.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const removeExtension = (path) => path.replace(/\.(t|j)sx?$/, '');
+function solidOCProviderTemplate({ viewPath }) {
+    return `
+  import { render } from 'solid-js/web';
+  import View from '${removeExtension(viewPath)}';
+  import { DataProvider } from 'oc-template-solid-compiler/dist/utils/useData'
+
+  function OCProvider(props: any): any {
+    const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = props;
+
+    (window as any).oc.events.fire('oc:componentDidMount', rest);
+
+    function getData(providerProps: any, parameters: any, cb: (error: any, parameters?: any, props?: any) => void) {
+      return (window as any).oc.getData({
+        name: providerProps._componentName,
+        version: providerProps._componentVersion,
+        baseUrl: providerProps._baseUrl,
+        parameters
+      }, (err: any, data: any) => {
+        if (err) {
+          return cb(err);
+        }
+        const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = (data.component.props as any); 
+        cb(null, rest, data.component.props);
+      });
+    }
+
+    function getSetting(providerProps: any, setting: string) {
+      const settingHash = {
+        name: providerProps._componentName,
+        version: providerProps._componentVersion,
+        baseUrl: providerProps._baseUrl,
+        staticPath: providerProps._staticPath
+      };
+      return (settingHash as any)[setting];
+    }
+   
+    (rest as any).getData = (parameters: any, cb: (error: any, parameters?: any, props?: any) => void) => getData(props, parameters, cb);
+    (rest as any).getSetting = (setting: string) => getSetting(props, setting);
+
+    return (
+      <DataProvider value={{...rest}}>
+        <View { ...rest } />
+      </DataProvider>
+    );
+  }
+
+  function renderer(props, element) {
+    render(() => <OCProvider {...props} />, element);
+  }
+
+  export default renderer;
+`;
+}
+exports.default = solidOCProviderTemplate;

package/dist/lib/vueOCProviderTemplate.d.ts

@@ -0,0 +1,3 @@
+export default function vueOCProviderTemplate({ viewPath }: {
+    viewPath: string;
+}): string;

package/dist/lib/vueOCProviderTemplate.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function vueOCProviderTemplate({ viewPath }) {
+    return `
+  import { createApp } from 'vue'
+  import View from '${viewPath}';
+
+  function getDataCb(providerProps, parameters, cb) {
+    return window.oc.getData({
+      name: providerProps._componentName,
+      version: providerProps._componentVersion,
+      baseUrl: providerProps._baseUrl,
+      parameters
+    }, (err, data) => {
+      if (err) {
+        return cb(err);
+      }
+      const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = data.component.props;
+      cb(null, rest, data.component.props);
+    });
+  }
+
+  function getSetting(providerProps, setting) {
+    const settingHash = {
+      name: providerProps._componentName,
+      version: providerProps._componentVersion,
+      baseUrl: providerProps._baseUrl,
+      staticPath: providerProps._staticPath
+    };
+    return settingHash[setting];
+  }
+
+
+  function renderer(props, element, ssr) {
+    function getData(params) {
+      return new Promise((resolve, reject) => {
+        getDataCb(props, params, (err, data) => {
+          if (err) {
+            return reject(err);
+          }
+          resolve(data);
+        });
+      });
+    }
+    props.getData = getData;
+    props.getSetting = (setting) => getSetting(props, setting);
+    createApp(View, props).mount(element, ssr);
+  }
+
+  export default renderer;
+`;
+}
+exports.default = vueOCProviderTemplate;

package/dist/utils/useData.d.ts

@@ -0,0 +1,7 @@
+type PromiseData<T = any> = T & {
+    getData<O = any>(parameters?: Partial<T>): Promise<O>;
+    getSetting(setting: 'name' | 'version' | 'baseUrl' | 'staticPath'): string;
+};
+export declare const DataProvider: (props: any) => import("solid-js").JSX.Element;
+export declare function useData<T = any>(): PromiseData<T>;
+export {};

package/dist/utils/useData.jsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'solid-js';
+const DataContext = createContext({});
+export const DataProvider = (props) => {
+    // @ts-ignore children props
+    return <DataContext.Provider value={props.value}>{props.children}</DataContext.Provider>;
+};
+export function useData() {
+    const { getData, ...rest } = useContext(DataContext);
+    function asyncGetData(data) {
+        return new Promise((resolve, reject) => {
+            // @ts-ignore
+            getData({ ...rest, ...data }, (err, newData) => {
+                if (err) {
+                    reject(err);
+                }
+                else {
+                    resolve(newData);
+                }
+            });
+        });
+    }
+    // @ts-ignore
+    return { getData: asyncGetData, ...rest };
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "oc-template-vue-compiler",
+  "version": "0.0.1",
+  "description": "Compiler for the vueJS OC template",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opencomponents/vite-templates.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opencomponents/vite-templates/issues"
+  },
+  "homepage": "https://github.com/opencomponents/vite-templates#readme",
+  "keywords": [
+    "oc",
+    "opencomponents",
+    "vuejs",
+    "oc-template"
+  ],
+  "author": {
+    "name": "Ricardo Devis Agullo",
+    "email": "mkredz@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "oc-template-vue": "^0.0.1",
+    "oc-vite-compiler": "^3.2.0"
+  },
+  "files": [
+    "dist/**",
+    "scaffold"
+  ],
+  "devDependencies": {
+    "prettier": "^2.3.2",
+    "prettier-config-guestline": "2.0.0"
+  }
+}

package/scaffold/src/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/scaffold/src/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/scaffold/src/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/scaffold/src/src/oc-app.d.ts

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

package/scaffold/src/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/scaffold/src/src/setupTests.js

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

package/scaffold/src/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/scaffold/src/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/scaffold/src/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/scaffold/src/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'
+  }
+});