Template svelte (hyperbrew#26)

* add svelte template

* dependency fixes, App > main, won't run on build

* improvements to tempate testing

* svelte fixes

* svelte fully functional

Co-authored-by: Martin Lindberg <[email protected]>

cep.config.debug.ts

@@ -0,0 +1,26 @@
+export const debugAll = [
+  {
+    mainPath: "./template-react/index.html", // DEBUG the React Template
+    name: "template-react",
+    panelDisplayName: "Bolt CEP - React",
+    autoVisible: true,
+    width: 600,
+    height: 650,
+  },
+  {
+    mainPath: "./template-vue/index.html", // DEBUG the Vue Template
+    name: "template-vue",
+    panelDisplayName: "Bolt CEP - Vue",
+    autoVisible: true,
+    width: 600,
+    height: 650,
+  },
+  {
+    mainPath: "./template-svelte/index.html", // DEBUG the Svelte Template
+    name: "template-svelte",
+    panelDisplayName: "Bolt CEP - Svelte",
+    autoVisible: true,
+    width: 600,
+    height: 650,
+  },
+];

cep.config.ts

@@ -1,5 +1,6 @@
 import { CEP_Config } from "vite-cep-plugin";
 import { version } from "./package.json";
+// import { debugAll } from "./cep.config.debug"; // DEBUG-ONLY
 
 const config: CEP_Config = {
   version,
@@ -44,6 +45,7 @@ const config: CEP_Config = {
       width: 600,
       height: 650,
     },
+    // ...debugAll, // DEBUG-ONLY
   ],
 
   build: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolt-cep",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "scripts": {
     "dev": "vite",
     "debug": "cross-env DEBUG_REACT=true vite build --watch true",
@@ -33,6 +33,8 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+    "@tsconfig/svelte": "^3.0.0",
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.43",
@@ -53,11 +55,14 @@
     "rollup-plugin-node-copy": "^1.0.4",
     "rollup-plugin-scss": "^3.0.0",
     "sass": "^1.43.4",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
     "types-for-adobe": "^7.0.0",
     "types-for-adobe-extras": "^0.0.1",
     "typescript": "^4.4.4",
     "vite": "^2.9.1",
-    "vite-cep-plugin": "^0.2.3",
+    "vite-cep-plugin": "^0.2.5",
     "yarn": "^1.22.17"
   },
   "main": "index.js",

src/js/index.scss

@@ -16,8 +16,6 @@ code {
   text-align: center;
 }
 
-
-
 .app-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -33,15 +31,6 @@ code {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 button {
   font-size: 1.25rem;
   background-color: #3f4653;
@@ -67,30 +56,30 @@ button:active {
   column-gap: 1rem;
 }
 
-.stack-icons{
+.stack-icons {
   display: flex;
   margin: 2rem 0rem 2rem 0rem;
   font-size: 2.5rem;
-  >div{
+  > div {
     display: flex;
     flex-direction: column;
     text-align: center;
     justify-content: center;
     font-size: 1rem;
     margin: 0rem 1rem 0rem 1rem;
   }
-  img{
+  img {
     margin: auto;
     display: block;
     height: 3rem;
     width: 3rem;
   }
 }
-.icon{
+.icon {
   width: 250px;
   height: 250px;
 }
-.icon-button{
+.icon-button {
   width: 20px;
-  height: 20px;;
-}
+  height: 20px;
+}

src/js/lib/utils.ts

@@ -15,16 +15,12 @@ export const openLinkInBrowser = (url: string) => {
 
 export const evalES = (script: string, isGlobal = false): Promise<string> => {
   return new Promise(function (resolve, reject) {
+    const pre = isGlobal
+      ? ""
+      : `var host = typeof $ !== 'undefined' ? $ : window; host["${ns}"].`;
+    const fullString = pre + script;
     csi.evalScript(
-      `try{
-        ${
-          isGlobal
-            ? ""
-            : `var host = typeof $ !== 'undefined' ? $ : window; host["${ns}"].`
-        }${script};
-      }catch(e){
-        alert(e);
-      }`,
+      "try{" + fullString + "}catch(e){alert(e);}",
       (res: string) => {
         resolve(res);
       }
@@ -34,9 +30,11 @@ export const evalES = (script: string, isGlobal = false): Promise<string> => {
 
 export const evalFile = (file: string) => {
   return evalES(
-    `typeof $ !== 'undefined' ?
-    $.evalFile("${file}") :
-    fl.runScript(FLfile.platformPathToURI("${file}"));`,
+    "typeof $ !== 'undefined' ? $.evalFile(\"" +
+      file +
+      '") : fl.runScript(FLfile.platformPathToURI("' +
+      file +
+      '"));',
     true
   );
 };

src/js/main/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/main/index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

src/js/main/main.scss

@@ -0,0 +1 @@
+@import "../variables.scss";

src/js/main/main.tsx

@@ -80,7 +80,7 @@ const Main = () => {
           </button>
         </div>
         <p>
-          Edit <code>app.tsx</code> and save to test HMR updates.
+          Edit <code>main.tsx</code> and save to test HMR updates.
         </p>
         <p>
           <button

src/js/template-react/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/main/index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

src/js/template-react/main.scss

@@ -0,0 +1 @@
+@import "../variables.scss";

src/js/template-svelte/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bolt CEP Svelte</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

src/js/template-svelte/main.scss

@@ -0,0 +1 @@
+@import "../variables.scss";

src/js/template-svelte/main.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { fs, os, path } from "../lib/node";
+  import { csi, evalES, evalFile, openLinkInBrowser } from "../lib/utils";
+
+  import viteLogo from "../assets/vite.svg";
+  import svelteLogo from "../assets/svelte.svg";
+  import tsLogo from "../assets/typescript.svg";
+  import sassLogo from "../assets/sass.svg";
+
+  import nodeJs from "../assets/node-js.svg";
+  import adobe from "../assets/adobe.svg";
+  import bolt from "../assets/bolt-cep.svg";
+
+  import "../index.scss";
+  import "./main.scss";
+
+  let count = 0;
+
+  const jsxTest = () => {
+    console.log(evalES(`helloWorld("${csi.getApplicationID()}")`));
+  };
+
+  const nodeTest = () => {
+    alert(
+      `Node.js ${process.version}\nPlatform: ${
+        os.platform
+      }\nFolder: ${path.basename(window.cep_node.global.__dirname)}`
+    );
+  };
+
+  onMount(() => {
+    if (window.cep) {
+      const extRoot = csi.getSystemPath("extension");
+      const jsxSrc = `${extRoot}/jsx/index.js`;
+      const jsxBinSrc = `${extRoot}/jsx/index.jsxbin`;
+      if (fs.existsSync(jsxSrc)) {
+        console.log(jsxSrc);
+        evalFile(jsxSrc);
+      } else if (fs.existsSync(jsxBinSrc)) {
+        console.log(jsxBinSrc);
+        evalFile(jsxBinSrc);
+      }
+    }
+  });
+</script>
+
+<div class="app">
+  <header class="app-header">
+    <img src={bolt} class="icon" alt="" />
+    <div class="stack-icons">
+      <div>
+        <img src={viteLogo} alt="" />
+        Vite
+      </div>
+      +
+      <div>
+        <img src={svelteLogo} alt="" />
+        Svelte
+      </div>
+      +
+      <div>
+        <img src={tsLogo} alt="" />
+        TypeScript
+      </div>
+      +
+      <div>
+        <img src={sassLogo} alt="" />
+        Sass
+      </div>
+    </div>
+    <div class="button-group">
+      <button on:click={() => (count += 1)}>Count is: {count}</button>
+      <button on:click={nodeTest}>
+        <img class="icon-button" src={nodeJs} alt="" />
+      </button>
+      <button on:click={jsxTest}>
+        <img class="icon-button" src={adobe} alt="" />
+      </button>
+    </div>
+
+    <p>Edit <code>main.svelte</code> and save to test HMR updates.</p>
+    <p>
+      <button
+        on:click={() =>
+          openLinkInBrowser("https://github.com/hyperbrew/bolt-cep")}
+      >
+        Bolt Docs
+      </button>
+      |
+      <button on:click={() => openLinkInBrowser("https://svelte.dev/docs")}>
+        Svelte Docs
+      </button>
+      |
+      <button
+        on:click={() =>
+          openLinkInBrowser("https://vitejs.dev/guide/features.html")}
+      >
+        Vite Docs
+      </button>
+    </p>
+  </header>
+</div>
+
+<style>
+</style>

src/js/template-svelte/main.ts

@@ -0,0 +1,7 @@
+import App from "./main.svelte";
+
+const app = new App({
+  target: document.getElementById("root") as Element,
+});
+
+export default app;

src/js/template-svelte/vite-env.d.ts

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

src/js/template-vue/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/main/main.ts"></script>
+    <script type="module" src="./main.ts"></script>
   </body>
 </html>

vite.config.ts

@@ -1,6 +1,8 @@
-import { defineConfig, preview } from "vite";
-import react from "@vitejs/plugin-react";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+import react from "@vitejs/plugin-react"; // BOLT-CEP_REACT-ONLY
+import vue from "@vitejs/plugin-vue"; // BOLT-CEP_VUE-ONLY
+import { svelte } from "@sveltejs/vite-plugin-svelte"; // BOLT-CEP_SVELTE-ONLY
 
 import { cep, runAction } from "vite-cep-plugin";
 import cepConfig from "./cep.config";
@@ -46,7 +48,12 @@ if (action) {
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), vue(), cep(config)],
+  plugins: [
+    react(), // BOLT-CEP_REACT-ONLY
+    vue(), // BOLT-CEP_VUE-ONLY
+    svelte(), // BOLT-CEP_SVELTE-ONLY
+    cep(config),
+  ],
   root,
   clearScreen: false,
   server: {
@@ -57,7 +64,6 @@ export default defineConfig({
   },
 
   build: {
-    // emptyOutDir: true,
     sourcemap: isPackage ? cepConfig.zxp.sourceMap : cepConfig.build?.sourceMap,
     watch: {
       include: "src/jsx/**",