oc-template-svelte-compiler 0.0.2

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-svelte-compiler - Compiler module
+
+OC template to compile components of type `oc-template-svelte`

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,19 @@
+"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 });
+process.env.VITE_CJS_IGNORE_WARNING = 'true';
+__exportStar(require("./lib/compile"), exports);
+__exportStar(require("oc-template-svelte"), 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_svelte_1 = require("oc-template-svelte");
+const vite_plugin_svelte_1 = require("@sveltejs/vite-plugin-svelte");
+const oc_vite_compiler_1 = require("oc-vite-compiler");
+const svelteOCProviderTemplate_1 = __importDefault(require("./svelteOCProviderTemplate"));
+exports.compile = (0, oc_vite_compiler_1.createCompile)({
+    plugins: [(0, vite_plugin_svelte_1.svelte)()],
+    viewWrapper: svelteOCProviderTemplate_1.default,
+    getInfo: oc_template_svelte_1.getInfo
+});

package/dist/lib/hmr.d.ts

@@ -0,0 +1,7 @@
+import { svelte as plugin } from '@sveltejs/vite-plugin-svelte';
+export declare const appBlock: ({ name, version, entry }: {
+    name: string;
+    version: string;
+    entry: string;
+}) => string;
+export { plugin };

package/dist/lib/hmr.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.plugin = exports.appBlock = void 0;
+const vite_plugin_svelte_1 = require("@sveltejs/vite-plugin-svelte");
+Object.defineProperty(exports, "plugin", { enumerable: true, get: function () { return vite_plugin_svelte_1.svelte; } });
+const appBlock = ({ name, version, entry }) => `
+<div id="root"></div>
+<script type="module">
+  const data = __INITIAL_DATA__;
+  window.__$$oc_initialData__ = Object.freeze(data);
+  const settings = Object.freeze({ baseUrl: '/', id: 'root', name: '${name}', staticPath: '/', version: '${version}' });
+  window.__$$oc_Settings__ = settings;
+
+  window.oc = window.oc || {};
+  window.oc.cmd = window.oc.cmd || [];
+
+  import App from "${entry}";
+  import { mount } from 'svelte'
+
+  const container = document.getElementById('root');
+
+  window.oc.cmd.push(() => {
+    mount(View, {
+      target: container,
+      props: rest
+    });
+    window.oc.events.fire('oc:rendered', { ...settings, element: container,  });
+  });
+</script>
+`;
+exports.appBlock = appBlock;

package/dist/lib/svelteOCProviderTemplate.d.ts

@@ -0,0 +1,4 @@
+export default function svelteOCProviderTemplate({ viewPath, providerFunctions }: {
+    viewPath: string;
+    providerFunctions: string;
+}): string;

package/dist/lib/svelteOCProviderTemplate.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function svelteOCProviderTemplate({ viewPath, providerFunctions }) {
+    return `
+  import { mount } from 'svelte'
+  import View from '${viewPath}';
+
+  function renderer(props, element, ssr) {
+    const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = props;
+    ${providerFunctions}
+
+    rest.getData = getData;
+    rest.getSetting = getSetting;
+    const app = mount(View, {
+      target: element,
+      props: rest
+    });
+  }
+
+  renderer.component = View;
+
+  export default renderer;
+`;
+}
+exports.default = svelteOCProviderTemplate;

package/dist/lib/vueOCProviderTemplate.d.ts

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

package/dist/lib/vueOCProviderTemplate.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function vueOCProviderTemplate({ viewPath, providerFunctions }) {
+    return `
+  import { createApp } from 'vue'
+  import View from '${viewPath}';
+
+  function renderer(props, element, ssr) {
+    const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = props;
+    ${providerFunctions}
+
+    rest.getData = getData;
+    rest.getSetting = getSetting;
+    createApp(View, rest).mount(element, ssr);
+  }
+
+  renderer.component = View;
+
+  export default renderer;
+`;
+}
+exports.default = vueOCProviderTemplate;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "oc-template-svelte-compiler",
+  "version": "0.0.2",
+  "description": "Compiler for the Svelte OC template",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "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",
+    "svelte",
+    "oc-template"
+  ],
+  "author": {
+    "name": "Ricardo Devis Agullo",
+    "email": "mkredz@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "oc-template-svelte": "^0.0.2",
+    "oc-vite-compiler": "^4.1.0",
+    "svelte": "^5.23.0"
+  },
+  "files": [
+    "dist/**",
+    "scaffold"
+  ],
+  "devDependencies": {
+    "prettier": "^2.3.2",
+    "prettier-config-guestline": "2.0.0"
+  }
+}

package/scaffold/src/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "base-component-svelte",
+  "description": "",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "oc-server dev",
+    "build": "npm run check && oc package .",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "test": "vitest"
+  },
+  "oc": {
+    "files": {
+      "data": "src/server.ts",
+      "template": {
+        "src": "src/App.svelte",
+        "type": "oc-template-svelte"
+      },
+      "static": [
+        "public"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "jsdom": "^21.1.1",
+    "oc-server": "^2.0.4",
+    "oc-template-svelte-compiler": "^0.0.1",
+    "svelte": "^5.23.0",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7"
+  }
+}

package/scaffold/src/src/App.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import logo from '../public/logo.png';
+  import { InitialData, serverClient } from 'oc-server';
+
+  let funFact: string | null = $state(null);
+  let { born, firstName, hobbies, lastName }: InitialData = $props();
+  let getFunFact = async () => {
+    let response = await serverClient.funFact({ year: born });
+    funFact = response.funFact;
+  };
+</script>
+
+<div class="container">
+  <img width="50" height="50" src={logo} alt="Logo" />
+
+  <h1>
+    Hello, <span>{firstName}</span>
+    {lastName}
+  </h1>
+  <div class="info">
+    <div class="block">Born: {born}</div>
+    <div class="block">
+      Hobbies: {hobbies}
+    </div>
+  </div>
+  {#if funFact}
+    <div>{funFact}</div>
+  {/if}
+  <button class="button" onclick={getFunFact}> Fun year fact </button>
+</div>
+
+<style>
+  .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;
+  }
+
+  .button:hover {
+    background-color: #c79535;
+  }
+
+  h1 {
+    margin: 0 0 20px 0;
+  }
+
+  span {
+    text-decoration: underline;
+  }
+
+  .info {
+    margin-bottom: 20px;
+  }
+
+  .block {
+    margin: 6px 0;
+  }
+</style>

package/scaffold/src/src/oc-app.d.ts

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

package/scaffold/src/src/server.ts

@@ -0,0 +1,61 @@
+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()
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
+    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/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.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/scaffold/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/scaffold/src/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

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'
+  }
+});