Create 'hello world' svelte app

marySalvi · marySalvi · commit efad5b5c1943 · 2023-08-25T14:18:14.000-04:00
diff --git a/widget/src/App.svelte b/widget/src/App.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let name: string = "friend";
+  console.log(arguments);
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/widget/src/index.html b/widget/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Svelte Example</title>
+</head>
+
+<body>
+  <input type="file" name="s3ff_mandatory_blob" data-s3fileinput="/api/s3ff" required="" id="id_s3ff_mandatory_blob">
+  <!-- This script tag points to the source of the JS file we want to load and bundle -->
+  <script type="module" defer src="main.ts"></script>
+</body>
+
+</html>
diff --git a/widget/src/main.ts b/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;
diff --git a/widget/src/svelte.d.ts b/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;
+}
