@merkur/create-widget 0.34.6 → 0.35.0

package/views/uhtml/template/src/views/View.js

@@ -1,23 +1,6 @@
 import Counter from '../components/Counter';
-import { headlineSlotFactory } from '../slots/HeadlineSlot';
 import ErrorView from './ErrorView';
 
-async function viewFactory(widget) {
-  const slot = (await Promise.all([headlineSlotFactory(widget)])).reduce(
-    (acc, cur) => {
-      acc[cur.name] = cur;
-
-      return acc;
-    },
-    {},
-  );
-
-  return {
-    View,
-    slot,
-  };
-}
-
 function View(widget) {
   if (widget.error && widget.error.status) {
     return ErrorView(widget);
@@ -32,5 +15,4 @@ function View(widget) {
   `;
 }
 
-export { viewFactory };
 export default View;

package/views/uhtml/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';
+import View from './views/View';
+
+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,
+    };
+  },
+});

package/views/uhtml/template/webpack.config.js

@@ -1,3 +1,4 @@
+const { applyUHtmlConfig } = require('@merkur/uhtml/webpack');
 const {
   createLiveReloadServer,
   createWebConfig,
@@ -9,8 +10,13 @@ const {
 
 module.exports = createLiveReloadServer().then(() =>
   Promise.all([
-    pipe(createWebConfig, applyStyleLoaders)(),
-    pipe(createWebConfig, applyStyleLoaders, applyES9Transformation)(),
-    pipe(createNodeConfig, applyStyleLoaders)(),
+    pipe(createWebConfig, applyUHtmlConfig, applyStyleLoaders)(),
+    pipe(
+      createWebConfig,
+      applyUHtmlConfig,
+      applyStyleLoaders,
+      applyES9Transformation,
+    )(),
+    pipe(createNodeConfig, applyUHtmlConfig, applyStyleLoaders)(),
   ]),
 );

package/views/uhtml/template.json

@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "ucontent": "2.0.0",
-    "uhtml": "3.1.0"
+    "@merkur/uhtml": "0.34.0"
   }
-}
+}

package/views/vanilla/template/src/{client.js → entries/client.js}

@@ -1,10 +1,10 @@
 import { createMerkurWidget, createMerkur } from '@merkur/core';
 
-import { mapViews } from './lib/utils';
-import { viewFactory } from './views/View';
-import widgetProperties from './widget';
+import { mapViews } from '@merkur/plugin-component/helpers';
+import { viewFactory } from '../views/View';
+import widgetProperties from '@widget';
 
-import './style.css';
+import '../style.css';
 
 function createWidget(widgetParams) {
   return createMerkurWidget({

package/views/vanilla/template/src/{server.js → entries/server.js}

@@ -1,7 +1,7 @@
 import { createMerkurWidget } from '@merkur/core';
 
-import { viewFactory } from './views/View';
-import widgetProperties from './widget';
+import { viewFactory } from '../views/View';
+import widgetProperties from '@widget';
 
 export function createWidget(widgetParams) {
   return createMerkurWidget({

package/template/nodemon.json

@@ -1,14 +0,0 @@
-{
-  "watch": [
-    "server/*",
-    "build/*"
-  ],
-  "ignore": [
-    "*Spec.js",
-    "*Spec.jsx"
-  ],
-  "events": {
-    "restart": "merkur-tools livereload"
-  },
-  "ext": "cjs,ejs,json,mjs,js,jsx"
-}

package/template/server/routes/playground/index.js

@@ -1,3 +0,0 @@
-const playground = require('./playground');
-
-module.exports = playground;

package/template/server/routes/playground/playground.ejs

@@ -1,46 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <script>
-    window.__merkur_dev__ = window.__merkur_dev__ || {};
-    window.__merkur_dev__.webSocketOptions = {
-      url: `ws://localhost:${<%- process.env.MERKUR_PLAYGROUND_LIVERELOAD_PORT %>}`
-    };
-  </script>
-  <script src="/@merkur/tools/static/livereload.js"></script>
-  <% assets.forEach((asset) => { %>
-    <%if (asset.type === 'stylesheet') { %>
-      <link rel='stylesheet' href='<%= asset.source %>' />
-    <% } %>
-    <%if (asset.type === 'script') { %>
-      <%if (typeof asset.source === 'string') { %>
-        <script src='<%= asset.source %>' defer='true'></script>
-      <% } %>
-      <%if (typeof asset.source === 'object') { %>
-        <script src='<%= asset.source.es11 %>' defer='true'></script>
-      <% } %>
-    <% } %>
-  <% }); %>
-  <title>MERKUR - widget</title>
-</head>
-
-<body>
-  <div class="headline-view"><%- widgetProperties && widgetProperties.slot && widgetProperties.slot.headline.html %></div>
-  <div class="merkur-view"><%- html %></div>
-  <script>
-    window.addEventListener('load', function () {
-      __merkur__.create(<%- JSON.stringify(widgetProperties) %>)
-        .then(function (widget) {
-          widget.containerSelector = '.merkur-view';
-          widget.slot.headline.containerSelector = '.headline-view';
-
-          widget.mount();
-        });
-    });
-  </script>
-</body>
-
-</html>

package/template/server/routes/playground/playground.js

@@ -1,48 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const ejs = require('ejs');
-const express = require('express');
-const got = require('got');
-
-const { playgroundErrorMiddleware } = require('@merkur/plugin-error/server');
-
-const { asyncMiddleware, getServerUrl } = require('../utils');
-
-const playgroundTemplate = ejs.compile(
-  fs.readFileSync(path.join(__dirname, '/playground.ejs'), 'utf8'),
-);
-
-const router = express.Router();
-
-router
-  .get(
-    '/',
-    asyncMiddleware(async (req, res) => {
-      const widgetProperties = await got(`${getServerUrl(req)}/widget`, {
-        retry: 0,
-        responseType: 'json',
-        searchParams: {
-          name: 'merkur',
-          counter: 0,
-        },
-      }).json();
-
-      const { html, assets, ...restProperties } = widgetProperties;
-
-      res.status(200).send(
-        playgroundTemplate({
-          widgetProperties: restProperties,
-          assets,
-          html,
-        }),
-      );
-    }),
-  )
-  .use(
-    playgroundErrorMiddleware({
-      renderPlayground: playgroundTemplate,
-    }),
-  );
-
-module.exports = () => ({ router });

package/template/server/routes/utils.js

@@ -1,14 +0,0 @@
-function asyncMiddleware(fn) {
-  return (req, res, next) => {
-    Promise.resolve(fn(req, res, next)).catch(next);
-  };
-}
-
-function getServerUrl(req) {
-  return (req.secure ? 'https' : 'http') + '://' + req.headers.host;
-}
-
-module.exports = {
-  asyncMiddleware,
-  getServerUrl,
-};

package/template/src/lib/utils.js

@@ -1,39 +0,0 @@
-function mapViews(widget, factoryFn, callback) {
-  if (widget.$external.resolvedViews) {
-    return mapResolvedViews(widget, callback);
-  }
-
-  return factoryFn(widget).then(({ View, slot = {} }) => {
-    const { containerSelector } = widget;
-    // Add container selectors defined on widget instance after creation
-    Object.keys(widget.slot).forEach((slotName) => {
-      slot[slotName].isSlot = true;
-      slot[slotName].containerSelector =
-        widget.slot[slotName].containerSelector;
-    });
-
-    widget.$external.resolvedViews = [
-      { View, containerSelector, isSlot: false },
-      ...Object.values(slot),
-    ];
-
-    return mapResolvedViews(widget, callback);
-  });
-}
-
-function mapResolvedViews(widget, callback) {
-  return widget.$external.resolvedViews.map(
-    ({ View, containerSelector, isSlot }) => {
-      callback({
-        View,
-        isSlot,
-        containerSelector,
-        container:
-          (containerSelector && document?.querySelector(containerSelector)) ||
-          widget.container,
-      });
-    },
-  );
-}
-
-export { mapViews };

package/views/preact/template/babel.config.js

@@ -1,13 +0,0 @@
-let config = require('@merkur/tools/babel.config.js');
-
-config.presets.push([
-  '@babel/preset-react',
-  {
-    runtime: 'automatic',
-    importSource: 'preact',
-  },
-]);
-
-module.exports = {
-  ...config,
-};

package/views/preact/template/src/client.js

@@ -1,56 +0,0 @@
-import { render, hydrate } from 'preact';
-import { unmountComponentAtNode } from 'preact/compat';
-
-import { createMerkurWidget, createMerkur } from '@merkur/core';
-
-import { mapViews } from './lib/utils';
-import { viewFactory } from './views/View.jsx';
-import widgetProperties from './widget';
-
-import './style.css';
-
-function createWidget(widgetParams) {
-  return createMerkurWidget({
-    ...widgetProperties,
-    ...widgetParams,
-    $dependencies: {
-      render,
-      hydrate,
-      unmountComponentAtNode,
-    },
-    async mount(widget) {
-      return mapViews(widget, viewFactory, ({ View, container, isSlot }) => {
-        if (!container) {
-          return null;
-        }
-
-        return (
-          container?.children?.length && !isSlot
-            ? widget.$dependencies.hydrate
-            : widget.$dependencies.render
-        )(View(widget), container);
-      });
-    },
-    async unmount(widget) {
-      mapViews(widget, viewFactory, ({ container }) => {
-        if (container) {
-          widget.$dependencies.unmountComponentAtNode(container);
-        }
-      });
-    },
-    async update(widget) {
-      return mapViews(
-        widget,
-        viewFactory,
-        ({ View, container }) =>
-          container && widget.$dependencies.render(View(widget), container),
-      );
-    },
-  });
-}
-
-const merkur = createMerkur();
-merkur.register({
-  ...widgetProperties,
-  createWidget,
-});

package/views/preact/template/src/server.js

@@ -1,31 +0,0 @@
-import render from 'preact-render-to-string';
-
-import { createMerkurWidget } from '@merkur/core';
-
-import { viewFactory } from './views/View';
-import widgetProperties from './widget';
-
-export function createWidget(widgetParams) {
-  return createMerkurWidget({
-    ...widgetProperties,
-    ...widgetParams,
-    $dependencies: {
-      render,
-    },
-    async mount(widget) {
-      const { View, slot = {} } = await viewFactory(widget);
-
-      return {
-        html: widget.$dependencies.render(View(widget)),
-        slot: Object.keys(slot).reduce((acc, cur) => {
-          acc[cur] = {
-            name: slot[cur].name,
-            html: widget.$dependencies.render(slot[cur].View(widget)),
-          };
-
-          return acc;
-        }, {}),
-      };
-    },
-  });
-}

package/views/preact/template/webpack.config.js

@@ -1,60 +0,0 @@
-const {
-  createLiveReloadServer,
-  createWebConfig,
-  createNodeConfig,
-  applyES9Transformation,
-  applyStyleLoaders,
-  createCacheKey,
-  pipe,
-} = require('@merkur/tool-webpack');
-
-function applyBabelLoader(config, { isProduction, environment, cache }) {
-  config.module.rules.push({
-    test: /\.(js|ts|tsx|mjs|jsx)$/,
-    exclude: (modulePath) =>
-      /node_modules/.test(modulePath) &&
-      !/node_modules\/(abort-controller|event-target-shim)/.test(modulePath),
-    use: {
-      loader: 'babel-loader',
-      options: {
-        presets: [
-          [
-            '@babel/preset-react',
-            {
-              runtime: 'automatic',
-              importSource: 'preact',
-              development: !isProduction,
-            },
-          ],
-        ],
-        cacheIdentifier: createCacheKey(
-          environment,
-          config?.name,
-          ...(cache?.versionDependencies ?? []),
-        ),
-        cacheDirectory: true,
-        cacheCompression: false,
-        compact: isProduction,
-        sourceMaps: !isProduction,
-        inputSourceMap: !isProduction,
-      },
-    },
-  });
-
-  return config;
-}
-
-module.exports = createLiveReloadServer().then(() =>
-  Promise.all([
-    pipe(createWebConfig, applyStyleLoaders, applyBabelLoader)(),
-    pipe(
-      createWebConfig,
-      applyStyleLoaders,
-      applyBabelLoader,
-      applyES9Transformation,
-    )(),
-    pipe(createNodeConfig, applyStyleLoaders, applyBabelLoader)(),
-  ]),
-);
-
-module.exports.applyBabelLoader = applyBabelLoader;

package/views/svelte/template/src/client.js

@@ -1,65 +0,0 @@
-import { createMerkurWidget, createMerkur } from '@merkur/core';
-
-import { mapViews } from './lib/utils';
-import { viewFactory } from './views/viewFactory';
-import widgetProperties from './widget';
-
-import './style.css';
-
-function createWidget(widgetParams) {
-  return createMerkurWidget({
-    ...widgetProperties,
-    ...widgetParams,
-    $dependencies: {},
-    async mount(widget) {
-      widget.$external.app = {};
-
-      mapViews(
-        widget,
-        viewFactory,
-        ({ containerSelector, container, View }) => {
-          if (!container) {
-            return;
-          }
-
-          widget.$external.app[containerSelector] = new View({
-            target: document.querySelector(containerSelector),
-            props: {
-              widget,
-              state: widget.state,
-              props: widget.props,
-            },
-            hydrate: !!container?.children?.length,
-          });
-        },
-      );
-    },
-    async unmount(widget) {
-      mapViews(widget, viewFactory, ({ containerSelector }) => {
-        if (!widget.$external.app[containerSelector]) {
-          return;
-        }
-
-        widget.$external.app[containerSelector].$destroy();
-      });
-    },
-    async update(widget) {
-      mapViews(widget, viewFactory, ({ containerSelector }) => {
-        if (!widget.$external.app[containerSelector]) {
-          return;
-        }
-
-        widget.$external.app[containerSelector].$set({
-          state: widget.state,
-          props: widget.props,
-        });
-      });
-    },
-  });
-}
-
-const merkur = createMerkur();
-merkur.register({
-  ...widgetProperties,
-  createWidget,
-});

package/views/svelte/template/src/server.js

@@ -1,32 +0,0 @@
-import { createMerkurWidget } from '@merkur/core';
-
-import { viewFactory } from './views/viewFactory';
-import widgetProperties from './widget';
-
-export function createWidget(widgetParams) {
-  return createMerkurWidget({
-    ...widgetProperties,
-    ...widgetParams,
-    $dependencies: {},
-    async mount(widget) {
-      const { View, slot = {} } = await viewFactory(widget);
-      const renderParams = {
-        widget,
-        state: widget.state,
-        props: widget.props,
-      };
-
-      return {
-        html: View.render(renderParams)?.html,
-        slot: Object.keys(slot).reduce((acc, cur) => {
-          acc[cur] = {
-            name: slot[cur].name,
-            html: slot[cur].View.render(renderParams)?.html,
-          };
-
-          return acc;
-        }, {}),
-      };
-    },
-  });
-}

package/views/svelte/template/src/slots/headlineSlotFactory.js

@@ -1,10 +0,0 @@
-import HeadlineSlot from './HeadlineSlot.svelte';
-
-async function headlineSlotFactory() {
-  return {
-    name: 'headline',
-    View: HeadlineSlot,
-  };
-}
-
-export { headlineSlotFactory };

package/views/svelte/template/src/views/viewFactory.js

@@ -1,19 +0,0 @@
-import { headlineSlotFactory } from '../slots/headlineSlotFactory';
-import View from './View.svelte';
-
-async function viewFactory(widget) {
-  const slot = (await Promise.all([headlineSlotFactory(widget)])).reduce(
-    (acc, cur) => {
-      acc[cur.name] = cur;
-
-      return acc;
-    },
-    {},
-  );
-
-  return {
-    View,
-    slot,
-  };
-}
-export { viewFactory };

package/views/uhtml/template/src/client.js

@@ -1,51 +0,0 @@
-import { render, html } from 'uhtml';
-
-import { createMerkurWidget, createMerkur } from '@merkur/core';
-
-import { mapViews } from './lib/utils';
-import { viewFactory } from './views/View';
-import widgetProperties from './widget';
-
-import './style.css';
-
-function createWidget(widgetParams) {
-  return createMerkurWidget({
-    ...widgetProperties,
-    ...widgetParams,
-    $dependencies: {
-      render,
-      html,
-    },
-    async mount(widget) {
-      return mapViews(
-        widget,
-        viewFactory,
-        ({ View, container }) =>
-          container && widget.$dependencies.render(container, View(widget)),
-      );
-    },
-    async unmount(widget) {
-      return mapViews(
-        widget,
-        viewFactory,
-        ({ container }) =>
-          container &&
-          widget.$dependencies.render(container, widget.$dependencies.html``),
-      );
-    },
-    async update(widget) {
-      return mapViews(
-        widget,
-        viewFactory,
-        ({ View, container }) =>
-          container && widget.$dependencies.render(container, View(widget)),
-      );
-    },
-  });
-}
-
-const merkur = createMerkur();
-merkur.register({
-  ...widgetProperties,
-  createWidget,
-});