feat(blocksBasic): add @lowdefy/blocks-basic

packages/blocksBasic/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "12",
+          "esmodules": true
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+}

packages/blocksBasic/README.md

@@ -0,0 +1,3 @@
+# Lowdefy Blocks Basic
+
+Basic Lowdefy blocks.

packages/blocksBasic/demo/Examples.js

@@ -0,0 +1,71 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useState } from 'react';
+import YAML from 'js-yaml';
+import { stubBlockProps, blockDefaultProps, BlockSchemaErrors } from '@lowdefy/block-tools';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import vs2015 from 'react-syntax-highlighter/dist/esm/styles/hljs/vs2015';
+
+SyntaxHighlighter.registerLanguage('yaml', yaml);
+const logger = console.log;
+
+const Examples = ({ type, Component }) => {
+  const [showYaml, toggelYaml] = useState(true);
+  // duplicate imported yaml to be mutabile
+  const examples = JSON.parse(JSON.stringify(require(`./examples/${type}.yaml`)));
+  const meta = require(`../src/blocks/${type}/${type}.json`);
+  Component.defaultProps = blockDefaultProps;
+  return (
+    <div>
+      <h1>{type}</h1>
+      <div>
+        Render YAML:{' '}
+        <input type="checkbox" checked={showYaml} onChange={() => toggelYaml(!showYaml)} />
+      </div>
+      {(examples || []).map((block) => {
+        const exYaml = YAML.safeDump(block, {
+          // sortKeys: true,
+          noRefs: true,
+        });
+        const props = stubBlockProps({ block, meta, logger });
+        return (
+          <div key={block.id}>
+            <h4 style={{ borderTop: '1px solid #b1b1b1', padding: 10, margin: 10 }}>
+              {type} {block.id}
+            </h4>
+            <div style={{ display: 'flex' }}>
+              {showYaml && (
+                <div style={{ minWidth: '30%' }}>
+                  <SyntaxHighlighter language="yaml" style={vs2015} showLineNumbers={true}>
+                    {exYaml}
+                  </SyntaxHighlighter>
+                  <BlockSchemaErrors schemaErrors={props.schemaErrors} />
+                </div>
+              )}
+              <div style={{ ...{ padding: 20, width: '100%' }, ...block.style }}>
+                <Component {...props} />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Examples;

packages/blocksBasic/demo/app.css

@@ -0,0 +1,4 @@
+html {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue';
+}

packages/blocksBasic/demo/bootstrap.js

@@ -0,0 +1,33 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { render } from 'react-dom';
+import Blocks from '../src';
+import Examples from './Examples';
+import './app.css';
+
+const Demo = () => (
+  <div id="page">
+    {Object.keys(Blocks).map((key) => (
+      <Examples key={key} type={key} Component={Blocks[key]} />
+    ))}
+  </div>
+);
+
+export default Demo;
+
+render(<Demo />, document.querySelector('#root'));

packages/blocksBasic/demo/examples/Box.yaml

@@ -0,0 +1,29 @@
+- id: default
+  type: Box
+- id: properties.content
+  type: Box
+  properties:
+    content: Foo
+- id: properties.style
+  type: Box
+  properties:
+    style: 
+      border: '1px solid blue'
+- id: areas.content
+  type: Box
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+- id: actions.onClick
+  type: Box
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+  actions:
+    onClick: 
+      - id: testAction
+        type: Text

packages/blocksBasic/demo/examples/Context.yaml

@@ -0,0 +1,29 @@
+- id: default
+  type: Context
+- id: properties.content
+  type: Context
+  properties:
+    content: Foo
+- id: properties.style
+  type: Context
+  properties:
+    style: 
+      border: '1px solid blue'
+- id: areas.content
+  type: Context
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+- id: actions.onClick
+  type: Context
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+  actions:
+    onClick: 
+      - id: testAction
+        type: Text

packages/blocksBasic/demo/examples/Html.yaml

@@ -0,0 +1,23 @@
+- id: default
+  type: Html
+- id: properties.html
+  type: Html
+  properties:
+    html: |
+      <div style="background: green; padding: 10px;">Content green background</div>
+- id: properties.style
+  type: Html
+  properties:
+    style: 
+      background: yellow
+      padding: 10
+    html: |
+      <div>properties.style yellow background</div>
+- id: properties.html-styled
+  type: Html
+  properties:
+    style: 
+      background: yellow
+      padding: 10
+    html: |
+      <div style="background: green; padding: 10px;">Content green background and properties.style yellow background</div>

packages/blocksBasic/demo/examples/List.yaml

@@ -0,0 +1,25 @@
+- id: default
+  type: List
+- id: default-two-items
+  type: List
+  blocks:
+    - id: one
+      type: Test
+    - id: two
+      type: Test
+- id: properties.style
+  type: List
+  properties:
+    style: 
+      border: 1px solid blue
+- id: properties.style-two-items
+  type: List
+  properties:
+    style: 
+      border: 1px solid blue
+  blocks:
+    - id: one
+      type: Test
+    - id: two
+      type: Test
+

packages/blocksBasic/demo/examples/Span.yaml

@@ -0,0 +1,29 @@
+- id: default
+  type: Span
+- id: properties.content
+  type: Span
+  properties:
+    content: Foo
+- id: properties.style
+  type: Span
+  properties:
+    style: 
+      border: '1px solid blue'
+- id: areas.content
+  type: Span
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+- id: actions.onClick
+  type: Span
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+  actions:
+    onClick: 
+      - id: testAction
+        type: Text

packages/blocksBasic/demo/index.js

@@ -0,0 +1,17 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import('./bootstrap');

packages/blocksBasic/jest.config.json

@@ -0,0 +1,11 @@
+{
+  "moduleFileExtensions": ["js", "json", "jsx", "ts", "tsx", "node", "yaml", "css"],
+  "transform": {
+    "\\.yaml$": "yaml-jest",
+    "\\.js?$": "babel-jest"
+  },
+  "moduleNameMapper": {
+    "\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
+  },
+  "coveragePathIgnorePatterns": ["/tests/", "/demo/"]
+}

packages/blocksBasic/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@lowdefy/blocks-basic",
+  "version": "1.0.6",
+  "license": "Apache-2.0",
+  "description": "Basic html Lowdefy blocks.",
+  "homepage": "https://lowdefy.com",
+  "bugs": {
+    "url": "https://github.com/lowdefy/lowdefy/issues"
+  },
+  "contributors": [
+    {
+      "name": "Sam Tolmay",
+      "url": "https://github.com/SamTolmay"
+    },
+    {
+      "name": "Gerrie van Wyk",
+      "url": "https://github.com/Gervwyk"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lowdefy/blocks-basic.git"
+  },
+  "browser": "dist/remoteEntry.js",
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "build": "webpack --config webpack.prod.js",
+    "clean": "rm -rf dist",
+    "npm-publish": "npm publish --access public",
+    "prepare": "yarn build",
+    "prepublishOnly": "yarn build",
+    "serve": "serve dist -p 3002",
+    "start": "webpack serve --config webpack.dev.js",
+    "test": "jest --coverage --config jest.config.json --no-cache",
+    "version:prerelease": "yarn version prerelease",
+    "version:patch": "yarn version patch -d",
+    "version:minor": "yarn version minor -d",
+    "version:major": "yarn version major -d"
+  },
+  "dependencies": {
+    "@lowdefy/block-tools": "1.0.1-alpha.13",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.12.1",
+    "@babel/core": "7.12.3",
+    "@babel/preset-env": "7.12.1",
+    "@babel/preset-react": "7.12.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.2.0",
+    "babel-jest": "26.6.1",
+    "babel-loader": "8.1.0",
+    "buffer": "5.7.0",
+    "clean-webpack-plugin": "3.0.0",
+    "copy-webpack-plugin": "6.2.1",
+    "css-loader": "5.0.0",
+    "enzyme": "3.11.0",
+    "html-webpack-plugin": "4.5.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.5.2",
+    "js-yaml": "3.14.0",
+    "react-markdown": "4.3.1",
+    "react-syntax-highlighter": "15.2.1",
+    "serve": "11.3.2",
+    "style-loader": "2.0.0",
+    "webpack": "5.3.2",
+    "webpack-cli": "4.1.0",
+    "webpack-dev-server": "3.11.0",
+    "webpack-merge": "5.2.0",
+    "yaml-jest": "1.0.5",
+    "yaml-loader": "0.6.0"
+  }
+}

packages/blocksBasic/public/index.html

@@ -0,0 +1,7 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

packages/blocksBasic/src/blocks/Box/Box.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-tools';
+
+const Box = ({ blockId, content, properties, methods, actions }) => (
+  <div
+    id={blockId}
+    data-testid={blockId}
+    onClick={() => methods.callAction({ action: 'onClick' })}
+    className={methods.makeCssClass([
+      { outline: 'none', cursor: actions.onClick && 'pointer' },
+      properties.style,
+    ])}
+  >
+    {properties.content || (content.content && content.content())}
+  </div>
+);
+
+Box.defaultProps = blockDefaultProps;
+
+export default Box;

packages/blocksBasic/src/blocks/Box/Box.json

@@ -0,0 +1,29 @@
+{
+  "category": "container",
+  "loading": false,
+  "schema": {
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "content": {
+          "type": "string",
+          "description": "Box content string, alternatively provide and list of blocks as Box content."
+        },
+        "style": {
+          "type": "object",
+          "description": "Style to apply to Box div."
+        }
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "onClick":  {
+          "type": "array"
+        }
+      }
+    }
+  }
+}

packages/blocksBasic/src/blocks/Context/Context.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-tools';
+
+const Context = ({ blockId, content, properties, methods, actions }) => (
+  <div
+    id={blockId}
+    data-testid={blockId}
+    onClick={() => methods.callAction({ action: 'onClick' })}
+    className={methods.makeCssClass([
+      { outline: 'none', cursor: actions.onClick && 'pointer' },
+      properties.style,
+    ])}
+  >
+    {properties.content || (content.content && content.content())}
+  </div>
+);
+
+Context.defaultProps = blockDefaultProps;
+
+export default Context;

packages/blocksBasic/src/blocks/Context/Context.json

@@ -0,0 +1,29 @@
+{
+  "category": "context",
+  "loading": false,
+  "schema": {
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "content": {
+          "type": "string",
+          "description": "Context content string, alternatively provide and list of blocks as Context content."
+        },
+        "style": {
+          "type": "object",
+          "description": "Style to apply to Context div."
+        }
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "onClick": {
+          "type": "array"
+        }
+      }
+    }
+  }
+}

packages/blocksBasic/src/blocks/Html/Html.js

@@ -0,0 +1,51 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-tools';
+
+class HtmlBlock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.div = null;
+  }
+
+  componentDidMount() {
+    this.div.innerHTML = this.props.properties.html;
+  }
+
+  componentDidUpdate() {
+    this.div.innerHTML = this.props.properties.html;
+  }
+
+  render() {
+    const { blockId, properties, methods } = this.props;
+    return (
+      <div
+        id={blockId}
+        data-testid={blockId}
+        ref={(el) => {
+          this.div = el;
+        }}
+        className={methods.makeCssClass(properties.style)}
+      />
+    );
+  }
+}
+
+HtmlBlock.defaultProps = blockDefaultProps;
+
+export default HtmlBlock;

packages/blocksBasic/src/blocks/Html/Html.json

@@ -0,0 +1,20 @@
+{
+  "category": "display",
+  "loading": false,
+  "schema": {
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "html": {
+          "type": "string",
+          "description": "Content to be rendered as Html."
+        },
+        "style": {
+          "type": "object",
+          "description": "Style to apply to Html div."
+        }
+      }
+    }
+  }
+}

packages/blocksBasic/src/blocks/List/List.js

@@ -0,0 +1,44 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useEffect } from 'react';
+import { blockDefaultProps } from '@lowdefy/block-tools';
+import Box from '../Box/Box';
+
+const List = ({ actions, blockId, methods, properties, list }) => {
+  useEffect(() => {
+    methods.registerMethod('pushItem', methods.pushItem);
+    methods.registerMethod('unshiftItem', methods.unshiftItem);
+    methods.registerMethod('removeItem', methods.removeItem);
+    methods.registerMethod('moveItemDown', methods.moveItemDown);
+    methods.registerMethod('moveItemUp', methods.moveItemUp);
+  }, []);
+  return (
+    <Box
+      actions={actions}
+      blockId={blockId}
+      properties={{ style: properties.style }}
+      methods={methods}
+      content={{
+        content: () => list.map((item) => item.content()),
+      }}
+    />
+  );
+};
+
+List.defaultProps = blockDefaultProps;
+
+export default List;

packages/blocksBasic/src/blocks/List/List.json

@@ -0,0 +1,27 @@
+{
+  "category": "list",
+  "valueType": "array",
+  "loading": false,
+  "schema": {
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "style": {
+          "type": "object",
+          "description": "Style to apply to Box div."
+        }
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "onClick":  {
+          "type": "array"
+        }
+      }
+    }
+  }
+}
+

packages/blocksBasic/src/blocks/Span/Span.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-tools';
+
+const Span = ({ actions, blockId, properties, content, methods }) => (
+  <span
+    id={blockId}
+    data-testid={blockId}
+    onClick={() => methods.callAction({ action: 'onClick' })}
+    className={methods.makeCssClass([
+      { outline: 'none', cursor: actions.onClick && 'pointer' },
+      properties.style,
+    ])}
+  >
+    {properties.content || (content.content && content.content())}
+  </span>
+);
+
+Span.defaultProps = blockDefaultProps;
+
+export default Span;

packages/blocksBasic/src/blocks/Span/Span.json

@@ -0,0 +1,29 @@
+{
+  "category": "container",
+  "loading": false,
+  "schema": {
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "content": {
+          "type": "string",
+          "description": "Box content string, alternatively provide and list of blocks as Box content."
+        },
+        "style": {
+          "type": "object",
+          "description": "Style to apply to Box div."
+        }
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "onClick": {
+          "type": "array"
+        }
+      }
+    }
+  }
+}

packages/blocksBasic/src/index.js

@@ -0,0 +1,24 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import Box from './blocks/Box/Box';
+import Context from './blocks/Context/Context';
+import Html from './blocks/Html/Html';
+import List from './blocks/List/List';
+import Span from './blocks/Span/Span';
+
+export { Box, Context, Html, Span, List };
+export default { Box, Context, Html, Span, List };

packages/blocksBasic/tests/Box.test.js

@@ -0,0 +1,42 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { mockBlock, runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+import { Box } from '../src';
+import examples from '../demo/examples/Box.yaml';
+import meta from '../src/blocks/Box/Box.json';
+
+runRenderTests({ examples, Block: Box, meta });
+runBlockSchemaTests({ examples, meta });
+
+const { before, methods, getProps } = mockBlock({ meta });
+beforeEach(before);
+
+test('callAction onClick', () => {
+  const block = {
+    id: 'one',
+    type: 'Box',
+  };
+  const Shell = () => <Box {...getProps(block)} methods={methods} />;
+  const wrapper = mount(<Shell />);
+  wrapper.find('[data-testid="one"]').simulate('click');
+  expect(methods.callAction).toHaveBeenCalledWith({ action: 'onClick' });
+});

packages/blocksBasic/tests/Context.test.js

@@ -0,0 +1,42 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { mockBlock, runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+import { Context } from '../src';
+import examples from '../demo/examples/Context.yaml';
+import meta from '../src/blocks/Context/Context.json';
+
+runRenderTests({ examples, Block: Context, meta });
+runBlockSchemaTests({ examples, meta });
+
+const { before, methods, getProps } = mockBlock({ meta });
+beforeEach(before);
+
+test('callAction onClick', () => {
+  const block = {
+    id: 'one',
+    type: 'Context',
+  };
+  const Shell = () => <Context {...getProps(block)} methods={methods} />;
+  const wrapper = mount(<Shell />);
+  wrapper.find('[data-testid="one"]').simulate('click');
+  expect(methods.callAction).toHaveBeenCalledWith({ action: 'onClick' });
+});

packages/blocksBasic/tests/Html.test.js

@@ -0,0 +1,53 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { mockBlock, runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+import { Html } from '../src';
+import examples from '../demo/examples/Html.yaml';
+import meta from '../src/blocks/Html/Html.json';
+
+runRenderTests({ examples, Block: Html, meta });
+runBlockSchemaTests({ examples, meta });
+
+const { before, methods, getProps } = mockBlock({ meta });
+beforeEach(before);
+
+test('update on properties.html change', () => {
+  const config = {
+    id: 'update',
+    type: 'Html',
+    properties: {
+      html: '<div>one</div>',
+    },
+  };
+  const Shell = ({ properties }) => (
+    <Html {...getProps(config)} methods={methods} properties={properties} />
+  );
+  const wrapper = mount(<Shell properties={config.properties} />);
+  expect(wrapper.html()).toMatchInlineSnapshot(
+    `"<div id=\\"update\\" data-testid=\\"update\\" class=\\"{}\\"><div>one</div></div>"`
+  );
+  wrapper.setProps({ properties: { html: '<div>two</div>' } });
+  wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(
+    `"<div id=\\"update\\" data-testid=\\"update\\" class=\\"{}\\"><div>two</div></div>"`
+  );
+});

packages/blocksBasic/tests/List.test.js

@@ -0,0 +1,116 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { mockBlock, runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+import { List } from '../src';
+import examples from '../demo/examples/List.yaml';
+import meta from '../src/blocks/List/List.json';
+
+runRenderTests({ examples, Block: List, meta });
+runBlockSchemaTests({ examples, meta });
+
+const { before, methods, getProps } = mockBlock({ meta });
+beforeEach(before);
+
+test('callAction onClick', () => {
+  const block = {
+    id: 'one',
+    type: 'List',
+  };
+  const Shell = () => <List {...getProps(block)} methods={methods} />;
+  const wrapper = mount(<Shell />);
+  wrapper.find('[data-testid="one"]').simulate('click');
+  expect(methods.callAction).toHaveBeenCalledWith({ action: 'onClick' });
+});
+
+test('register list methods on mount', () => {
+  const block = {
+    id: 'update',
+    type: 'List',
+    properties: {
+      style: { test: 1 },
+    },
+    blocks: [
+      {
+        id: 'one',
+        type: 'Test',
+      },
+    ],
+  };
+  const Shell = ({ properties }) => (
+    <List {...getProps(block)} methods={methods} properties={properties} />
+  );
+  const wrapper = mount(<Shell properties={block.properties} />);
+
+  expect(methods.registerMethod).toMatchInlineSnapshot(`
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          "pushItem",
+          [MockFunction],
+        ],
+        Array [
+          "unshiftItem",
+          [MockFunction],
+        ],
+        Array [
+          "removeItem",
+          [MockFunction],
+        ],
+        Array [
+          "moveItemDown",
+          [MockFunction],
+        ],
+        Array [
+          "moveItemUp",
+          [MockFunction],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  `);
+  expect(methods.registerMethod).toHaveBeenCalledTimes(5);
+  // only on mount
+  wrapper.setProps({ properties: { test: 2 } });
+  wrapper.update();
+  expect(methods.registerMethod).toHaveBeenCalledTimes(5);
+});

packages/blocksBasic/tests/Span.test.js

@@ -0,0 +1,42 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { mockBlock, runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+import { Span } from '../src';
+import examples from '../demo/examples/Span.yaml';
+import meta from '../src/blocks/Span/Span.json';
+
+runRenderTests({ examples, Block: Span, meta });
+runBlockSchemaTests({ examples, meta });
+
+const { before, methods, getProps } = mockBlock({ meta });
+beforeEach(before);
+
+test('callAction onClick', () => {
+  const block = {
+    id: 'one',
+    type: 'Span',
+  };
+  const Shell = () => <Span {...getProps(block)} methods={methods} />;
+  const wrapper = mount(<Shell />);
+  wrapper.find('[data-testid="one"]').simulate('click');
+  expect(methods.callAction).toHaveBeenCalledWith({ action: 'onClick' });
+});

packages/blocksBasic/tests/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

packages/blocksBasic/tests/__snapshots__/Box.test.js.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render actions.onClick 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}"
+  data-testid="actions.onClick"
+  id="actions.onClick"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render areas.content 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="areas.content"
+  id="areas.content"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render default 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="default"
+  id="default"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render properties.content 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="properties.content"
+  id="properties.content"
+  onClick={[Function]}
+>
+  Foo
+</div>
+`;
+
+exports[`Render properties.style 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},{\\"border\\":\\"1px solid blue\\"}]}"
+  data-testid="properties.style"
+  id="properties.style"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Test Schema actions.onClick 1`] = `true`;
+
+exports[`Test Schema actions.onClick 2`] = `null`;
+
+exports[`Test Schema areas.content 1`] = `true`;
+
+exports[`Test Schema areas.content 2`] = `null`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema properties.content 1`] = `true`;
+
+exports[`Test Schema properties.content 2`] = `null`;
+
+exports[`Test Schema properties.style 1`] = `true`;
+
+exports[`Test Schema properties.style 2`] = `null`;

packages/blocksBasic/tests/__snapshots__/Context.test.js.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render actions.onClick 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}"
+  data-testid="actions.onClick"
+  id="actions.onClick"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render areas.content 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="areas.content"
+  id="areas.content"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render default 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="default"
+  id="default"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Render properties.content 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="properties.content"
+  id="properties.content"
+  onClick={[Function]}
+>
+  Foo
+</div>
+`;
+
+exports[`Render properties.style 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},{\\"border\\":\\"1px solid blue\\"}]}"
+  data-testid="properties.style"
+  id="properties.style"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</div>
+`;
+
+exports[`Test Schema actions.onClick 1`] = `true`;
+
+exports[`Test Schema actions.onClick 2`] = `null`;
+
+exports[`Test Schema areas.content 1`] = `true`;
+
+exports[`Test Schema areas.content 2`] = `null`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema properties.content 1`] = `true`;
+
+exports[`Test Schema properties.content 2`] = `null`;
+
+exports[`Test Schema properties.style 1`] = `true`;
+
+exports[`Test Schema properties.style 2`] = `null`;

packages/blocksBasic/tests/__snapshots__/Html.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render default 1`] = `
+<div
+  className="{}"
+  data-testid="default"
+  id="default"
+/>
+`;
+
+exports[`Render properties.html 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html"
+  id="properties.html"
+/>
+`;
+
+exports[`Render properties.html-styled 1`] = `
+<div
+  className="{\\"style\\":{\\"background\\":\\"yellow\\",\\"padding\\":10}}"
+  data-testid="properties.html-styled"
+  id="properties.html-styled"
+/>
+`;
+
+exports[`Render properties.style 1`] = `
+<div
+  className="{\\"style\\":{\\"background\\":\\"yellow\\",\\"padding\\":10}}"
+  data-testid="properties.style"
+  id="properties.style"
+/>
+`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema properties.html 1`] = `true`;
+
+exports[`Test Schema properties.html 2`] = `null`;
+
+exports[`Test Schema properties.html-styled 1`] = `true`;
+
+exports[`Test Schema properties.html-styled 2`] = `null`;
+
+exports[`Test Schema properties.style 1`] = `true`;
+
+exports[`Test Schema properties.style 2`] = `null`;

packages/blocksBasic/tests/__snapshots__/List.test.js.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render default 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="default"
+  id="default"
+  onClick={[Function]}
+/>
+`;
+
+exports[`Render default-two-items 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="default-two-items"
+  id="default-two-items"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    one
+  </div>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    two
+  </div>
+</div>
+`;
+
+exports[`Render properties.style 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},{\\"border\\":\\"1px solid blue\\"}]}"
+  data-testid="properties.style"
+  id="properties.style"
+  onClick={[Function]}
+/>
+`;
+
+exports[`Render properties.style-two-items 1`] = `
+<div
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},{\\"border\\":\\"1px solid blue\\"}]}"
+  data-testid="properties.style-two-items"
+  id="properties.style-two-items"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    one
+  </div>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    two
+  </div>
+</div>
+`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema default-two-items 1`] = `true`;
+
+exports[`Test Schema default-two-items 2`] = `null`;
+
+exports[`Test Schema properties.style 1`] = `true`;
+
+exports[`Test Schema properties.style 2`] = `null`;
+
+exports[`Test Schema properties.style-two-items 1`] = `true`;
+
+exports[`Test Schema properties.style-two-items 2`] = `null`;

packages/blocksBasic/tests/__snapshots__/Span.test.js.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render actions.onClick 1`] = `
+<span
+  className="{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}"
+  data-testid="actions.onClick"
+  id="actions.onClick"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</span>
+`;
+
+exports[`Render areas.content 1`] = `
+<span
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="areas.content"
+  id="areas.content"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</span>
+`;
+
+exports[`Render default 1`] = `
+<span
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="default"
+  id="default"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</span>
+`;
+
+exports[`Render properties.content 1`] = `
+<span
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
+  data-testid="properties.content"
+  id="properties.content"
+  onClick={[Function]}
+>
+  Foo
+</span>
+`;
+
+exports[`Render properties.style 1`] = `
+<span
+  className="{\\"style\\":[{\\"outline\\":\\"none\\"},{\\"border\\":\\"1px solid blue\\"}]}"
+  data-testid="properties.style"
+  id="properties.style"
+  onClick={[Function]}
+>
+  <div
+    style={
+      Object {
+        "border": "1px solid red",
+        "padding": 10,
+      }
+    }
+  >
+    content
+  </div>
+</span>
+`;
+
+exports[`Test Schema actions.onClick 1`] = `true`;
+
+exports[`Test Schema actions.onClick 2`] = `null`;
+
+exports[`Test Schema areas.content 1`] = `true`;
+
+exports[`Test Schema areas.content 2`] = `null`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema properties.content 1`] = `true`;
+
+exports[`Test Schema properties.content 2`] = `null`;
+
+exports[`Test Schema properties.style 1`] = `true`;
+
+exports[`Test Schema properties.style 2`] = `null`;

packages/blocksBasic/webpack.common.js

@@ -0,0 +1,94 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+const path = require('path');
+const fs = require('fs');
+
+const package = require('./package.json');
+
+const sanitizeName = (name) => {
+  return name
+    .replace('@', '_at_')
+    .replace('/', '_slash_')
+    .replace('-', '_dash_')
+    .replace(/^[a-zA-Z0-9_]/g, '_');
+};
+
+// Get all directories in ./src/blocks folder and create module definition for ModuleFederation
+const getDirectories = (srcPath) =>
+  fs.readdirSync(srcPath).filter((file) => fs.statSync(path.join(srcPath, file)).isDirectory());
+const blockModules = () => {
+  const blocks = getDirectories('./src/blocks');
+  const modules = {};
+  blocks.forEach((block) => {
+    modules[`./${block}`] = `./src/blocks/${block}/${block}.js`;
+    // modules[`./${block}/meta`] = `./src/blocks/${block}/${block}.json`;
+  });
+  return modules;
+};
+
+module.exports = {
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      // TODO: FIXME: do NOT webpack 5 support with this
+      // x-ref: https://github.com/webpack/webpack/issues/11467
+      // waiting for babel fix: https://github.com/vercel/next.js/pull/17095#issuecomment-692435147
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          presets: ['@babel/preset-react'],
+        },
+      },
+      {
+        test: /\.ya?ml$/,
+        type: 'json',
+        use: 'yaml-loader',
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: sanitizeName(package.name),
+      library: { type: 'var', name: sanitizeName(package.name) },
+      filename: 'remoteEntry.js',
+      exposes: blockModules(),
+      shared: {
+        ...package.dependencies,
+        react: {
+          singleton: true, // only a single version of the shared module is allowed
+          requiredVersion: '~17.0.0',
+          version: package.dependencies.react,
+        },
+        'react-dom': {
+          singleton: true, // only a single version of the shared module is allowed
+          requiredVersion: '~17.0.0',
+          version: package.dependencies['react-dom'],
+        },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};

packages/blocksBasic/webpack.dev.js

@@ -0,0 +1,49 @@
+const CopyPlugin = require('copy-webpack-plugin');
+const path = require('path');
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common.js');
+const package = require('./package.json');
+
+const sanitizeName = (name) => {
+  return name
+    .replace('@', '_at_')
+    .replace('/', '_slash_')
+    .replace('-', '_dash_')
+    .replace(/^[a-zA-Z0-9_]/g, '_');
+};
+
+const addRemoteEntryUrl = (content, absoluteFrom) => {
+  const scope = sanitizeName(package.name);
+  const meta = JSON.parse(content);
+  meta.moduleFederation = {
+    module: path.basename(absoluteFrom, '.json'),
+    scope,
+    version: package.version,
+    remoteEntryUrl: 'http://localhost:3002/remoteEntry.js',
+  };
+  return JSON.stringify(meta);
+};
+
+module.exports = merge(common, {
+  entry: './demo/index',
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 3002,
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'src/blocks/**/*.json',
+          transformPath: (targetPath) => {
+            return path.join('meta', path.basename(targetPath));
+          },
+          transform: addRemoteEntryUrl,
+        },
+      ],
+    }),
+  ],
+});

packages/blocksBasic/webpack.prod.js

@@ -0,0 +1,47 @@
+const CopyPlugin = require('copy-webpack-plugin');
+const path = require('path');
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common.js');
+const package = require('./package.json');
+
+const sanitizeName = (name) => {
+  return name
+    .replace('@', '_at_')
+    .replace('/', '_slash_')
+    .replace('-', '_dash_')
+    .replace(/^[a-zA-Z0-9_]/g, '_');
+};
+
+const addRemoteEntryUrl = (content, absoluteFrom) => {
+  const scope = sanitizeName(package.name);
+  const meta = JSON.parse(content);
+  // if no moduleFederation info is provided, default to unpkg
+  if (!meta.moduleFederation) {
+    meta.moduleFederation = {
+      module: path.basename(absoluteFrom, '.json'),
+      scope,
+      version: package.version,
+      remoteEntryUrl: `https://unpkg.com/${package.name}@${package.version}/dist/remoteEntry.js`,
+    };
+  }
+  return JSON.stringify(meta);
+};
+
+module.exports = merge(common, {
+  entry: './src/index',
+  mode: 'production',
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'src/blocks/**/*.json',
+          transformPath: (targetPath) => {
+            return path.join('meta', path.basename(targetPath));
+          },
+          transform: addRemoteEntryUrl,
+        },
+      ],
+    }),
+  ],
+});