Merge pull request #184 from mjancarik/uhtml-svelte

Uhtml svelte

createRollupConfig.mjs

@@ -209,26 +209,27 @@ function createRollupTypescriptConfig(options = {}) {
   config.output = [
     {
       dir: options?.dir ?? './lib',
-      entryFileNames: '[name].cjs',
+      entryFileNames: `[name]${options?.postfix ? `.${options?.postfix}` : ''}.cjs`,
       format: 'cjs',
       exports: 'named',
     },
     {
       dir: options?.dir ?? './lib',
-      entryFileNames: '[name].js',
+      entryFileNames: `[name]${options?.postfix ? `.${options?.postfix}` : ''}.js`,
       format: 'cjs',
       exports: 'named',
     },
     {
       dir: options?.dir ?? './lib',
-      entryFileNames: '[name].mjs',
+      entryFileNames: `[name]${options?.postfix ? `.${options?.postfix}` : ''}.mjs`,
       format: 'esm',
       exports: 'named',
     },
   ];
 
   config.plugins.push(
     typescript({
+      target: options?.target ?? 'ES2020',
       outDir: options?.dir ?? './lib',
     }),
     options.watchMode &&
@@ -240,6 +241,14 @@ function createRollupTypescriptConfig(options = {}) {
   return config;
 }
 
+function createRollupTypescriptES9Config(options = {}) {
+  return createRollupTypescriptConfig({
+    ...options,
+    target: 'ES2018',
+    postfix: 'es9',
+  });
+}
+
 export default createRollupConfig;
 
 export {
@@ -249,4 +258,5 @@ export {
   createRollupES9Config,
   createRollupUMDConfig,
   createRollupTypescriptConfig,
+  createRollupTypescriptES9Config,
 };

packages/core/types.d.ts

@@ -1,5 +1,3 @@
-export type ViewType = (widget: Widget) => any;
-
 export interface BaseWidgetAsset {
   type: 'stylesheet' | 'script' | 'inlineStyle';
   optional?: boolean;
@@ -14,13 +12,15 @@ export interface SourceAsset extends BaseWidgetAsset {
   source: string;
 }
 
+export interface WidgetDependencies {}
+
 export interface Widget {
   name: string;
   version: string;
   containerSelector?: string;
   $in: WidgetInternal;
   $external: WidgetExternal;
-  $dependencies: Record<string, any>;
+  $dependencies: WidgetDependencies;
   $plugins: WidgetPlugin[];
 }
 
@@ -33,7 +33,7 @@ export interface WidgetDefinition {
   assets: (WidgetAsset | SourceAsset)[];
   $plugins?: Array<() => WidgetPlugin>;
   $external: WidgetExternal;
-  $dependencies: Record<string, any>;
+  $dependencies: WidgetDependencies;
   create?: WidgetFunction;
   setup?: WidgetFunction;
 }
@@ -63,8 +63,8 @@ export interface Merkur {
     widgets: []; // TODO
     widgetFactory: Record<string, MerkurCreate>;
   };
-  $external: Record<string, any>;
-  $dependencies: Record<string, any>;
+  $external: WidgetExternal;
+  $dependencies: WidgetDependencies;
   create: MerkurCreate;
   register: ({
     name,

packages/create-widget/views/svelte/template.json

@@ -1,6 +1,5 @@
 {
-  "devDependencies": {
-    "svelte": "^3.59.1",
-    "svelte-loader": "^3.1.7"
+  "dependencies": {
+    "@merkur/svelte": "0.34.0"
   }
-}
+}

packages/create-widget/views/svelte/template/src/widget.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+import { defineWidget } from '@merkur/core';
+import {
+  componentPlugin,
+  createViewFactory,
+  createSlotFactory,
+} from '@merkur/plugin-component';
+import { errorPlugin } from '@merkur/plugin-error';
+import { eventEmitterPlugin } from '@merkur/plugin-event-emitter';
+
+import HeadlineSlot from './slots/HeadlineSlot.svelte';
+import View from './views/View.svelte';
+
+import pkg from '../package.json';
+
+import './style.css';
+
+export default defineWidget({
+  name: pkg.name,
+  version: pkg.version,
+  viewFactory: createViewFactory((widget) => ({
+    View,
+    slotFactories: [
+      createSlotFactory((widget) => ({
+        name: 'headline',
+        View: HeadlineSlot,
+      })),
+    ],
+  })),
+  $plugins: [componentPlugin, eventEmitterPlugin, errorPlugin],
+  assets: [
+    {
+      name: 'widget.js',
+      type: 'script',
+    },
+    {
+      name: 'widget.css',
+      type: 'stylesheet',
+    },
+  ],
+  onClick(widget) {
+    widget.setState({ counter: widget.state.counter + 1 });
+  },
+  onReset(widget) {
+    widget.setState({ counter: 0 });
+  },
+  load(widget) {
+    // We don't want to set environment into app state
+    const { environment, ...restProps } = widget.props;
+
+    return {
+      counter: 0,
+      ...restProps,
+    };
+  },
+});