feat: introduce a svelte ui package (podman-desktop#6172)

* feat: introduce a svelte ui package the renderer package has a dependency to this new module we could publish the ui-svelte package so other components could reuse components defined there for now, there is no component being defined but stay tuned 🎉 Signed-off-by: Florent Benoit <[email protected]>
feloy · Feb 28, 2024 · e9b987f · e9b987f
1 parent 26f4c33
commit e9b987f
Show file tree

Hide file tree

Showing 10 changed files with 255 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     ]
   },
   "scripts": {
-    "build": "npm run build:main && npm run build:preload && npm run build:preload-docker-extension && npm run build:preload-webview && npm run build:renderer && npm run build:extensions",
+    "build": "npm run build:main && npm run build:preload && npm run build:preload-docker-extension && npm run build:preload-webview && npm run build:ui && npm run build:renderer && npm run build:extensions",
     "build:main": "cd ./packages/main && vite build",
     "build:extensions": "npm run build:extensions:compose && npm run build:extensions:docker && npm run build:extensions:lima && npm run build:extensions:podman && npm run build:extensions:kubecontext && npm run build:extensions:kind && npm run build:extensions:registries && npm run build:extensions:kubectl-cli",
     "build:extensions:compose": "cd ./extensions/compose && npm run build",
@@ -38,12 +38,13 @@
     "build:preload-webview": "cd ./packages/preload-webview && vite build",
     "build:preload:types": "dts-cb -i \"packages/preload/tsconfig.json\" -o \"packages/preload/exposedInMainWorld.d.ts\" && dts-cb -i \"packages/preload-docker-extension/tsconfig.json\" -o \"packages/preload-docker-extension/exposedInDockerExtension.d.ts\" && dts-cb -i \"packages/preload-webview/tsconfig.json\" -o \"packages/preload-webview/exposedInWebview.d.ts\"",
     "build:renderer": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite -c packages/renderer/vite.config.js build",
+    "build:ui": "cd ./packages/ui && npm run build",
     "compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.cjs --dir --config.asar=false",
     "compile:next": "cross-env MODE=production npm run build && electron-builder build --publish always --config .electron-builder.config.cjs",
     "compile:pull-request": "cross-env MODE=production npm run build && electron-builder build --publish never --config .electron-builder.config.cjs",
     "compile:current": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.cjs",
     "test": "npm run test:unit && npm run test:e2e",
-    "test:unit": "npm run test:main && npm run test:preload && npm run test:preload-docker-extension && npm run test:preload-webview && npm run test:renderer && npm run test:tools && npm run test:extensions",
+    "test:unit": "npm run test:main && npm run test:preload && npm run test:preload-docker-extension && npm run test:preload-webview && npm run test:renderer && npm run test:ui && npm run test:tools && npm run test:extensions",
     "test:e2e": "npm run test:e2e:build && npm run test:e2e:run",
     "test:e2e:build": "cross-env NODE_ENV=development MODE=development DEBUG=pw:browser npm run build",
     "test:e2e:run": "xvfb-maybe --auto-servernum --server-args='-screen 0 1280x960x24' -- vitest run tests/src/ --pool=threads --poolOptions.threads.singleThread --poolOptions.threads.isolate --no-file-parallelism",
@@ -68,6 +69,7 @@
     "test:extensions:registries": "vitest run -r extensions/registries --passWithNoTests --coverage ",
     "test:extensions:kubectl-cli": "vitest run -r extensions/kubectl-cli --passWithNoTests --coverage ",
     "test:renderer": "vitest -c packages/renderer/vite.config.js run packages/renderer --passWithNoTests --coverage",
+    "test:ui": "vitest run -r packages/ui --passWithNoTests --coverage",
     "test:tools": "vitest run tools --passWithNoTests --coverage",
     "test:watch": "vitest watch",
     "watch": "node scripts/watch.mjs",
@@ -84,6 +86,7 @@
     "typecheck:preload-dd-extension": "tsc --noEmit -p packages/preload-docker-extension/tsconfig.json",
     "typecheck:preload-webview": "tsc --noEmit -p packages/preload-webview/tsconfig.json",
     "typecheck:renderer": "npm run build:preload:types && tsc --noEmit -p packages/renderer/tsconfig.json",
+    "typecheck:ui": "npm run build:preload:types && tsc --noEmit -p packages/ui/tsconfig.json",
     "typecheck:extensions": "npm run typecheck:extensions:compose && npm run typecheck:extensions:kind && npm run typecheck:extensions:docker && npm run typecheck:extensions:lima && npm run typecheck:extensions:kube-context && npm run typecheck:extensions:podman && npm run typecheck:extensions:registries && npm run typecheck:extensions:kubectl-cli",
     "typecheck:extensions:kind": "tsc --noEmit --project extensions/kind",
     "typecheck:extensions:compose": "tsc --noEmit --project extensions/compose",
@@ -93,7 +96,7 @@
     "typecheck:extensions:podman": "tsc --noEmit --project extensions/podman",
     "typecheck:extensions:registries": "tsc --noEmit --project extensions/registries",
     "typecheck:extensions:kubectl-cli": "tsc --noEmit --project extensions/kubectl-cli",
-    "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer && npm run typecheck:preload-dd-extension && npm run typecheck:preload-webview && npm run typecheck:extensions",
+    "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:ui && npm run typecheck:renderer && npm run typecheck:preload-dd-extension && npm run typecheck:preload-webview && npm run typecheck:extensions",
     "website:build": "cd website && yarn run docusaurus build",
     "website:prod": "cd website && yarn run docusaurus build && yarn serve",
     "website:dev": "cd website && yarn run docusaurus start",

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -52,6 +52,7 @@
   "dependencies": {
     "@zerodevx/svelte-toast": "^0.9.5",
     "electron-context-menu": "^3.6.1",
-    "tinro": "^0.6.12"
+    "tinro": "^0.6.12",
+    "@podman-desktop/ui-svelte": "^0.0.1"
   }
 }
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
@@ -0,0 +1 @@
+.svelte-kit
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@podman-desktop/ui-svelte",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "svelte-package",
+    "watch": "svelte-package -w",
+    "test": "vitest run --coverage --passWithNoTests",
+    "test:watch": "vitest watch --coverage --passWithNoTests",
+    "svelte:check": "svelte-check --tsconfig ./tsconfig.json",
+    "publish:next": "yarn publish  --registry=https://registry.npmjs.org/ --no-git-tag-version --new-version 0.0.1-\"$(date +%s)\""
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.spec.*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0",
+    "svelte-fa": "^4.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "svelte-fa": "^4.0.2"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.2.6",
+    "@sveltejs/vite-plugin-svelte": "3.0.2",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^4.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "7.0.0",
+    "autoprefixer": "^10.4.17",
+    "eslint-plugin-svelte": "^2.35.1",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.35",
+    "postcss-load-config": "^5.0.3",
+    "svelte": "4.2.12",
+    "svelte-check": "^3.6.4",
+    "svelte-eslint-parser": "^0.33.1",
+    "svelte-preprocess": "^5.1.3",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
+  }
+}
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
diff --git a/packages/ui/svelte.config.js b/packages/ui/svelte.config.js
@@ -0,0 +1,33 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import sveltePreprocess from 'svelte-preprocess';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess({
+    postcss: {
+      configFilePath: join(__dirname, 'postcss.config.cjs'),
+    },
+  }),
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "resolveJsonModule": true,
+    "preserveValueImports": false,
+    "baseUrl": ".",
+    "paths": {
+      "/@/*": ["./src/*"]
+    },
+    /**
+     * 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
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"]
+}
diff --git a/packages/ui/vite.config.js b/packages/ui/vite.config.js
@@ -0,0 +1,72 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+/* eslint-env node */
+import { join } from 'path';
+import * as path from 'path';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'url';
+import { coverageConfig } from '../../vitest-shared-extensions.config';
+
+let filename = fileURLToPath(import.meta.url);
+const PACKAGE_ROOT = path.dirname(filename);
+const PACKAGE_NAME = 'ui';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  resolve: {
+    alias: {
+      '/@/': join(PACKAGE_ROOT, 'src') + '/',
+    },
+  },
+  plugins: [svelte({ hot: !process.env.VITEST })],
+  test: {
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    globals: true,
+    environment: 'jsdom',
+    alias: [
+      // https://github.com/vitest-dev/vitest/issues/2834
+      { find: /^svelte$/, replacement: 'svelte/internal' },
+    ],
+    deps: {
+      inline: ['moment'],
+    },
+    ...coverageConfig(PACKAGE_ROOT, PACKAGE_NAME),
+  },
+  base: '',
+  server: {
+    fs: {
+      strict: true,
+    },
+  },
+  build: {
+    sourcemap: true,
+    outDir: 'dist',
+    assetsDir: '.',
+    lib: {
+      entry: 'src/lib/index.ts',
+      formats: ['es'],
+    },
+
+    emptyOutDir: true,
+    reportCompressedSize: false,
+  },
+});
diff --git a/scripts/watch.mjs b/scripts/watch.mjs
@@ -118,6 +118,38 @@ const setupMainPackageWatcher = ({ config: { server, extensions } }) => {
   });
 };
 
+const setupUiPackageWatcher = () => {
+  const logger = createLogger(LOG_LEVEL, {
+    prefix: '[ui]',
+  });
+
+  /** @type {ChildProcessWithoutNullStreams | null} */
+  let spawnProcess = null;
+
+  if (spawnProcess !== null) {
+    spawnProcess.off('exit', process.exit);
+    spawnProcess.kill('SIGINT');
+    spawnProcess = null;
+  }
+
+  spawnProcess = spawn(join(__dirname, '../node_modules/.bin/svelte-package'), ['-w'], {
+    cwd: './packages/ui/',
+    env: { ...process.env },
+  });
+
+  spawnProcess.stdout.on('data', d => d.toString().trim() && logger.warn(d.toString(), { timestamp: true }));
+  spawnProcess.stderr.on('data', d => {
+    const data = d.toString().trim();
+    if (!data) return;
+    const mayIgnore = stderrFilterPatterns.some(r => r.test(data));
+    if (mayIgnore) return;
+    logger.error(data, { timestamp: true });
+  });
+
+  // Stops the watch script when the application has been quit
+  spawnProcess.on('exit', process.exit);
+};
+
 /**
  * Start or restart App when source files are changed
  * @param {{ws: import('vite').WebSocketServer}} WebSocketServer
@@ -231,6 +263,7 @@ const setupExtensionApiWatcher = name => {
     await setupPreloadPackageWatcher(viteDevServer);
     await setupPreloadDockerExtensionPackageWatcher(viteDevServer);
     await setupPreloadWebviewPackageWatcher(viteDevServer);
+    await setupUiPackageWatcher();
     await setupMainPackageWatcher(viteDevServer);
   } catch (e) {
     console.error(e);

diff --git a/yarn.lock b/yarn.lock
@@ -3383,6 +3383,17 @@
     p-map "^4.0.0"
     webpack-sources "^3.2.2"
 
+"@sveltejs/package@^2.2.6":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@sveltejs/package/-/package-2.2.7.tgz#5c2c247d8807f6d683dcd9d51a609860f35cb31b"
+  integrity sha512-/vvmrQO2mMvROdM/iGRHtRn+ValnK9xzB50pqRcX0IvoeVoTq7uhYf+KifrZTluBA+km6AX/WXRXajrgrgbmvw==
+  dependencies:
+    chokidar "^3.6.0"
+    kleur "^4.1.5"
+    sade "^1.8.1"
+    semver "^7.5.4"
+    svelte2tsx "~0.7.0"
+
 "@sveltejs/vite-plugin-svelte-inspector@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.0.0.tgz#365afaa0dd63517838ce4686a3dc3982be348a9b"
@@ -6920,6 +6931,11 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
+dedent-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
+  integrity sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==
+
 deep-eql@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
@@ -12624,7 +12640,7 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-pascal-case@^3.1.2:
+pascal-case@^3.1.1, pascal-case@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
   integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
@@ -14178,7 +14194,7 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
 
-sade@^1.7.3, sade@^1.7.4:
+sade@^1.7.3, sade@^1.7.4, sade@^1.8.1:
   version "1.8.1"
   resolved "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
   integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
@@ -15213,6 +15229,14 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/svelte-steps/-/svelte-steps-2.4.1.tgz#64e055735818e81454e1ca5be8b7b9fe23a8b239"
   integrity sha512-2Xq2lLcGJf3PaEY46f1w5s+/O+tLl4U2V+Z+sCeoUm/kEPFXeZP/aFr2JVKwdzSlXCT+raz75xqXtnZrPWJ0zA==
 
+svelte2tsx@~0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.7.2.tgz#8ed8ce17097c1b04f69689cf0f37ead1acb8fc07"
+  integrity sha512-gtKJPzGt8OARDILafwyTeM2Xh/t5nCN+/Kjr2SlfVDqct5G4t/e8jaY6e0cxjLOyiVYJTGQrjmghrMyH6jAHnQ==
+  dependencies:
+    dedent-js "^1.0.1"
+    pascal-case "^3.1.1"
+
 [email protected]:
   version "4.2.12"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.12.tgz#13d98d2274d24d3ad216c8fdc801511171c70bb1"