@merkur/create-widget 0.34.5 → 0.35.0

package/bin/createWidget.mjs

@@ -13,7 +13,7 @@ const { argv } = yargs(hideBin(process.argv));
 if (argv._.length === 0) {
   // eslint-disable-next-line no-console
   console.log(`
-Please specify your new project directory: 
+Please specify your new project directory:
   ${chalk.blue('@merkur/create-widget')} ${chalk.green('<project-directory>')}
 For example:
   ${chalk.blue('@merkur/create-widget')} ${chalk.green('my-widget')}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkur/create-widget",
-  "version": "0.34.5",
+  "version": "0.35.0",
   "description": "CLI for creating merkur widget easily.",
   "bin": {
     "merkur-create-widget": "./bin/createWidget.mjs"
@@ -44,5 +44,5 @@
     "inquirer": "9.2.2",
     "yargs": "^17.7.2"
   },
-  "gitHead": "ad686581d92da82eac89cc892a0f71a5c3519e70"
+  "gitHead": "383f29bdf67a7f4252876867687371a8d26f53f2"
 }

package/template/jest.config.js

@@ -1,5 +1,9 @@
 const config = require('@merkur/tools/jest.config.js');
 
+config.transform = {
+  '^.+\\.[t|j]sx?$': 'esbuild-jest2',
+};
+
 module.exports = {
   ...config,
 };

package/template/merkur.config.mjs

@@ -0,0 +1,3 @@
+export default function () {
+  return {};
+}

package/template/package.json

@@ -3,44 +3,39 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "dev:server": "cross-env NODE_CONFIG_DIR='./server/config' NODE_ENV=development nodemon server/server.js --config nodemon.json",
     "test": "npm run test:all",
-    "test:unit": "cross-env TEST_GROUP='unit' jest -c ./jest.config.js",
-    "test:integration": "cross-env TEST_GROUP='integration' NODE_CONFIG_DIR='./server/config' jest -c ./jest.config.js",
-    "test:all": "npm run build && cross-env TEST_GROUP='all' NODE_CONFIG_DIR='./server/config' jest -c ./jest.config.js",
-    "test:watch": "cross-env TEST_GROUP='unit' jest -c ./jest.config.js --watchAll",
+    "test:unit": "cross-env TEST_GROUP='unit' merkur test",
+    "test:integration": "cross-env TEST_GROUP='integration' merkur test",
+    "test:all": "npm run build && cross-env TEST_GROUP='all' merkur test",
+    "test:watch": "cross-env TEST_GROUP='unit' merkur test --watchAll",
     "lint": "eslint -c ./.eslintrc.js --ignore-path ./.prettierignore './**/*.{js,jsx}'",
-    "dev": "cross-env NODE_ENV=development webpack --config ./webpack.config.js --watch",
-    "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",
-    "start": "cross-env NODE_CONFIG_DIR='./server/config' NODE_ENV=production node server/server.js"
+    "dev": "merkur dev",
+    "build": "merkur build",
+    "start": "merkur start"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@merkur/core": "0.34.0",
-    "@merkur/integration": "0.34.0",
-    "@merkur/plugin-component": "0.34.0",
-    "@merkur/plugin-error": "0.34.4",
-    "@merkur/plugin-event-emitter": "0.34.0",
+    "@merkur/cli": "0.35.0",
+    "@merkur/core": "0.35.0",
+    "@merkur/integration": "0.35.0",
+    "@merkur/plugin-component": "0.35.0",
+    "@merkur/plugin-error": "0.35.0",
+    "@merkur/plugin-event-emitter": "0.35.0",
     "compression": "^1.7.4",
     "config": "^3.3.7",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
-    "ejs": "^3.1.6",
     "express": "^4.17.3",
     "express-static-gzip": "^2.1.5",
-    "got": "^11.8.2",
     "helmet": "^5.0.2",
     "morgan": "^1.10.0"
   },
   "devDependencies": {
-    "@merkur/tools": "0.34.0",
-    "@merkur/tool-webpack": "0.34.0",
-    "nodemon": "^2.0.15",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2"
+    "@merkur/tools": "0.35.0",
+    "esbuild-jest2": "^0.6.5"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=20.0.0"
   }
 }

package/template/server/__integration__/appSpec.js

@@ -9,7 +9,7 @@ describe('Widget', () => {
     expect(res.statusCode).toEqual(200);
     expect(res.body.assets.length).toBeGreaterThan(0);
     delete res.body.assets;
-    expect(res.body).toMatchInlineSnapshot();
+    expect(res.body).toMatchSnapshot();
   });
 
   it('should return 404 for not defined route', async () => {
@@ -18,10 +18,4 @@ describe('Widget', () => {
     expect(res.statusCode).toEqual(404);
     expect(res.body.error.status).toEqual(404);
   });
-
-  it('should return 200 for playground page', async () => {
-    const res = await request(app).get('/');
-
-    expect(res.statusCode).toEqual(200);
-  });
 });

package/template/server/app.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 const compression = require('compression');
 const cors = require('cors');
 const express = require('express');
@@ -7,17 +5,19 @@ const expressStaticGzip = require('express-static-gzip');
 const helmet = require('helmet');
 const morgan = require('morgan');
 
+const { resolveConfig } = require('@merkur/cli/server');
+
+const { merkurConfig } = resolveConfig();
+
 const {
   apiErrorMiddleware,
   logErrorMiddleware,
 } = require('@merkur/plugin-error/server');
 
 const errorRouteFactory = require('./routes/error');
-const playgroundRouteFactory = require('./routes/playground');
 const widgetAPIRouteFactory = require('./routes/widgetAPI');
 
 const error = errorRouteFactory();
-const playground = playgroundRouteFactory();
 const widgetAPI = widgetAPIRouteFactory();
 
 const expressStaticConfig = {
@@ -28,8 +28,6 @@ const expressStaticConfig = {
 };
 
 const app = express();
-app.set('view engine', 'ejs');
-app.set('trust proxy', true);
 
 app
   .use(morgan('dev'))
@@ -43,24 +41,17 @@ app
   .use(cors())
   .use(compression())
   .use(
-    '/static',
-    expressStaticGzip(path.join(__dirname, 'static'), expressStaticConfig),
+    merkurConfig.widgetServer.staticPath,
+    express.static(merkurConfig.widgetServer.staticFolder),
   )
   .use(
-    '/static',
+    merkurConfig.widgetServer.staticPath,
     expressStaticGzip(
-      path.join(__dirname, '../build/static'),
+      merkurConfig.widgetServer.staticFolder,
       expressStaticConfig,
     ),
   )
-  .use(
-    '/@merkur/tools/static/',
-    express.static(
-      path.join(__dirname, '../node_modules/@merkur/tools/static'),
-    ),
-  )
   .use(widgetAPI.router)
-  .use(playground.router)
   .use(error.router)
   .use(logErrorMiddleware())
   .use(apiErrorMiddleware());

package/template/server/config/default.json

@@ -1,9 +1,5 @@
 {
   "environment": "development",
-  "server": {
-    "port": 4444,
-    "clusters": 0
-  },
   "widget": {
     "apiUrl": "https://api.github.dev/"
   }

package/template/server/config/production.json

@@ -1,8 +1,5 @@
 {
   "environment": "production",
-  "server": {
-    "clusters": 3
-  },
   "widget": {
     "apiUrl": "https://api.github.com/"
   }

package/template/server/routes/widgetAPI/widgetAPI.js

@@ -1,17 +1,26 @@
 const config = require('config');
 const express = require('express');
 
-const { createAssets, memo } = require('@merkur/integration/server');
+const { resolveConfig } = require('@merkur/cli/server');
+const {
+  asyncMiddleware,
+  createAssets,
+  memo,
+  requireUncached,
+} = require('@merkur/integration/server');
 const memoCreateAssets = memo(createAssets);
 
+const { merkurConfig } = resolveConfig();
+const { staticFolder, buildFolder, protocol, host, staticPath } =
+  merkurConfig.widgetServer;
+
 const widgetEnvironment = config.get('widget');
-const merkurModule = require('../../../build/widget.cjs');
-const { asyncMiddleware, getServerUrl } = require('../utils');
 
 const router = express.Router();
 router.get(
   '/widget',
   asyncMiddleware(async (req, res) => {
+    const merkurModule = requireUncached(`${buildFolder}/widget.cjs`);
     const widget = await merkurModule.createWidget({
       props: {
         name: req.query.name,
@@ -22,14 +31,11 @@ router.get(
     const { html, slot = {} } = await widget.mount();
     const info = await widget.info();
 
-    const staticFolder = `${__dirname}/../../../build/static`;
-    const staticBaseUrl = `${getServerUrl(req)}/static`;
-
     info.assets = await memoCreateAssets({
       assets: info.assets,
       staticFolder,
-      staticBaseUrl,
-      folders: ['es11', 'es9'],
+      staticBaseUrl: `${protocol}//${host}${staticPath}`,
+      folders: Object.keys(merkurConfig.task),
     });
 
     const status = info?.error?.status ?? 200;

package/template/server/server.js

@@ -1,11 +1,12 @@
 const cluster = require('cluster');
 const os = require('os');
 
-const config = require('config');
+const { resolveConfig } = require('@merkur/cli/server');
+const { merkurConfig } = resolveConfig();
 
 const { app } = require('./app');
 
-const serverConfig = config.get('server');
+const { widgetServer } = merkurConfig;
 
 process.on('uncaughtException', (error) => {
   console.error(error);
@@ -15,10 +16,8 @@ process.on('unhandledRejection', (error) => {
   console.error(error);
 });
 
-if (!serverConfig.clusters || !cluster.isMaster) {
-  const server = app.listen(config.get('server.port'), () => {
-    console.log(`listen on localhost:${config.get('server.port')}`); // eslint-disable-line no-console
-  });
+if (!widgetServer.clusters || !cluster.isMaster) {
+  const server = app.listen(widgetServer.port);
 
   const handleExit = () => {
     server.close(() => {
@@ -30,7 +29,7 @@ if (!serverConfig.clusters || !cluster.isMaster) {
   process.on('SIGQUIT', handleExit);
   process.on('SIGTERM', handleExit);
 } else {
-  let cpuCount = serverConfig.clusters || os.cpus().length;
+  let cpuCount = widgetServer.clusters || os.cpus().length;
 
   for (let i = 0; i < cpuCount; i += 1) {
     cluster.fork();

package/template/src/widget.js

@@ -1,18 +1,16 @@
+import { defineWidget } from '@merkur/core';
 import { componentPlugin } from '@merkur/plugin-component';
 import { errorPlugin } from '@merkur/plugin-error';
 import { eventEmitterPlugin } from '@merkur/plugin-event-emitter';
 
 import pkg from '../package.json';
+import './style.css';
 
-export default {
+export default defineWidget({
   name: pkg.name,
   version: pkg.version,
   $plugins: [componentPlugin, eventEmitterPlugin, errorPlugin],
   assets: [
-    {
-      name: 'polyfill.js',
-      type: 'script',
-    },
     {
       name: 'widget.js',
       type: 'script',
@@ -38,4 +36,4 @@ export default {
       ...restProps,
     };
   },
-};
+});

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

@@ -2,6 +2,9 @@ const config = require('@merkur/tools/jest.config.js');
 
 config.setupFilesAfterEnv = ['./jest.setup.js'];
 config.snapshotSerializers = ['enzyme-to-json/serializer'];
+config.transform = {
+  '^.+\\.[t|j]sx?$': 'esbuild-jest2',
+};
 
 module.exports = {
   ...config,

package/views/preact/template/merkur.config.mjs

@@ -0,0 +1,5 @@
+export default function () {
+  return {
+    extends: ['@merkur/preact/cli'],
+  };
+}

package/views/preact/template/src/slots/HeadlineSlot.jsx

@@ -2,13 +2,6 @@ import Welcome from '../components/Welcome';
 import WidgetContext from '../components/WidgetContext';
 import WidgetDescription from '../components/WidgetDescription';
 
-async function headlineSlotFactory() {
-  return {
-    name: 'headline',
-    View: HeadlineSlot,
-  };
-}
-
 function HeadlineSlot(widget) {
   if (widget.error && widget.error.status) {
     return null;
@@ -27,5 +20,4 @@ function HeadlineSlot(widget) {
   );
 }
 
-export { headlineSlotFactory };
 export default HeadlineSlot;

package/views/preact/template/src/views/View.jsx

@@ -1,23 +1,6 @@
+import ErrorView from './ErrorView';
 import Counter from '../components/Counter';
 import WidgetContext from '../components/WidgetContext';
-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) {
@@ -35,5 +18,4 @@ function View(widget) {
   );
 }
 
-export { viewFactory };
 export default View;

package/views/preact/template/src/views/__tests__/ViewSpec.jsx

@@ -24,6 +24,6 @@ describe('View', () => {
   it('should display main view', async () => {
     const wrapper = await widget.mount();
 
-    expect(wrapper).toMatchInlineSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 });

package/views/preact/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/preact/template.json

@@ -1,13 +1,11 @@
 {
   "dependencies": {
-    "preact": "10.13.2",
-    "preact-render-to-string": "6.0.3"
+    "@merkur/preact": "0.34.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.18.6",
-    "babel-loader": "9.1.2",
     "enzyme": "3.11.0",
+    "identity-obj-proxy": "^3.0.0",
     "enzyme-adapter-preact-pure": "4.1.0",
     "enzyme-to-json": "3.6.2"
   }
-}
+}

package/views/svelte/template/merkur.config.mjs

@@ -0,0 +1,5 @@
+export default function () {
+  return {
+    extends: ['@merkur/svelte/cli'],
+  };
+}

package/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,
+    };
+  },
+});

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

@@ -5,57 +5,33 @@ const {
   applyES9Transformation,
   applyStyleLoaders,
   pipe,
-  webpackMode,
 } = require('@merkur/tool-webpack');
-
-function applySvelteWeb(config) {
-  config.module.rules.push({
-    test: /\.(svelte|html)$/,
-    use: {
-      loader: 'svelte-loader',
-      options: {
-        compilerOptions: {
-          dev: webpackMode,
-          generate: 'dom',
-          hydratable: true,
-        },
-        emitCss: true,
-        hotReload: false,
-      },
-    },
-  });
-
-  return config;
-}
-
-function applySvelteNode(config) {
-  config.module.rules.push({
-    test: /\.(svelte|html)$/,
-    use: {
-      loader: 'svelte-loader',
-      options: {
-        compilerOptions: {
-          css: false,
-          generate: 'ssr',
-          dev: webpackMode,
-          hydratable: true,
-        },
-      },
-    },
-  });
-
-  return config;
-}
+const {
+  applySvelteConfig,
+  applySvelteWeb,
+  applySvelteNode,
+} = require('@merkur/svelte/webpack');
 
 module.exports = createLiveReloadServer().then(() =>
   Promise.all([
-    pipe(createWebConfig, applyStyleLoaders, applySvelteWeb)(),
     pipe(
       createWebConfig,
+      applySvelteConfig,
+      applyStyleLoaders,
+      applySvelteWeb,
+    )(),
+    pipe(
+      createWebConfig,
+      applySvelteConfig,
       applyStyleLoaders,
       applySvelteWeb,
       applyES9Transformation,
     )(),
-    pipe(createNodeConfig, applyStyleLoaders, applySvelteNode)(),
+    pipe(
+      createNodeConfig,
+      applySvelteConfig,
+      applyStyleLoaders,
+      applySvelteNode,
+    )(),
   ]),
 );

package/views/svelte/template.json

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

package/views/uhtml/template/merkur.config.mjs

@@ -0,0 +1,5 @@
+export default function () {
+  return {
+    extends: ['@merkur/uhtml/cli'],
+  };
+}

package/views/uhtml/template/src/slots/HeadlineSlot.js

@@ -2,13 +2,6 @@ import Welcome from '../components/Welcome';
 import WidgetDescription from '../components/WidgetDescription';
 import ErrorView from '../views/ErrorView';
 
-async function headlineSlotFactory() {
-  return {
-    name: 'headline',
-    View: HeadlineSlot,
-  };
-}
-
 function HeadlineSlot(widget) {
   if (widget.error && widget.error.status) {
     return ErrorView(widget);
@@ -27,5 +20,4 @@ function HeadlineSlot(widget) {
   `;
 }
 
-export { headlineSlotFactory };
 export default HeadlineSlot;