Svelte widget

tox.ini

@@ -96,5 +96,6 @@ ignore =
     D10,
 extend-exclude =
     node_modules,
+    .direnv
 # Explicitly set this, so "python-client/pyproject.toml" is never used
 black-config = pyproject.toml

widget/.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.svelte": [
+            "parcel-transformer-svelte3-plus"
+        ]
+    }
+}

widget/package.json

@@ -13,7 +13,9 @@
     "build": "npm-run-all build:clean build:compile"
   },
   "dependencies": {
-    "django-s3-file-field": "file:../javascript-client"
+    "django-s3-file-field": "file:../javascript-client",
+    "svelte": "^4.2.0",
+    "svelte-preprocess": "^5.0.4"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.10.0",
@@ -27,7 +29,11 @@
     "npm-run-all": "^4.1.5",
     "parcel": "^2.10.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "parcel-transformer-svelte3-plus": "^0.2.10",
+    "process": "^0.11.10",
+    "svelte-check": "^3.5.0"
   },
   "alias": {
     "buffer": false
@@ -36,7 +42,13 @@
     "last 1 chrome version",
     "last 1 firefox version"
   ],
+  "@parcel/resolver-default": {
+    "packageExports": true
+  },
   "eslintConfig": {
+    "env": {
+      "node": true
+    },
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "project": true
@@ -53,6 +65,20 @@
     ],
     "rules": {
       "no-restricted-syntax": 0
-    }
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {}
+      }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts",
+          "**/*.js",
+          "**/*.svelte"
+        ]
+      }
+    ]
   }
 }

widget/src/App.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let name: string = "friend";
+  console.log(arguments);
+</script>
+
+<h1>Hello {name}!</h1>

widget/src/main.ts

@@ -0,0 +1,16 @@
+import App from './App.svelte';
+
+const targetInput = document.querySelector('input[data-s3fileinput]') as Element;
+const parent = targetInput.parentNode;
+const wrapper = document.createElement('div');
+parent?.replaceChild(wrapper, targetInput);
+wrapper.appendChild(targetInput);
+
+const app = new App({
+  target: document.querySelector('input[data-s3fileinput]')?.parentNode as Element,
+  props: {
+    name: 'world',
+  },
+});
+
+export default app;

widget/src/svelte.d.ts

@@ -0,0 +1,25 @@
+declare module '*.svelte' {
+  interface ComponentOptions<Props> {
+    target: HTMLElement;
+    anchor?: HTMLElement;
+    props?: Props;
+    hydrate?: boolean;
+    intro?: boolean;
+  }
+
+  interface Component<Props> {
+    new (options: ComponentOptions<Props>): any;
+    $set: (props: object) => any;
+    $on: (event: string, callback: (event: CustomEvent) => any) => any;
+    $destroy: () => any;
+    render: (props?: object) => {
+      html: string;
+      css: { code: string; map?: string };
+      head?: string;
+    };
+  }
+
+  const component: Component<object>;
+
+  export default component;
+}

widget/svelte.config.js

@@ -0,0 +1,5 @@
+const sveltePreprocess = require('svelte-preprocess')
+
+module.exports = {
+  preprocess: sveltePreprocess()
+}

widget/tsconfig.json

@@ -1,6 +1,9 @@
 {
-  "extends": "@tsconfig/recommended/tsconfig.json",
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
   ]
 }