Merge branch 'main' into develop

.pnp.js

@@ -3892,6 +3892,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@apollo/link-retry", "npm:2.0.0-beta.3"],
             ["@babel/core", "npm:7.11.6"],
             ["@babel/preset-react", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:7.10.4"],
+            ["@lowdefy/block-tools", "workspace:packages/blockTools"],
             ["babel-loader", "virtual:e7dd2bdbec1b3ec399e5f3318d0a58728583b58181f43cb8f4f372a1b2b9707e2ffcf76bd80aad3c5c64a731754028a8070020628ca4fa0a02fe260c179762ae#npm:8.1.0"],
             ["bundle-loader", "npm:0.5.6"],
             ["graphql", "npm:15.3.0"],

packages/blockTools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/block-tools",
-  "version": "1.0.0",
+  "version": "1.0.1-experimental.1",
   "licence": "Apache-2.0",
   "description": "Lowdefy Block Tools",
   "homepage": "https://lowdefy.com",

packages/blockTools/src/connectBlock.js

@@ -15,10 +15,11 @@
 */
 
 import React from 'react';
+import makeCssClass from './makeCssClass';
 
 const defaultMethods = (methods) => ({
+  makeCssClass,
   callAction: methods.callAction || (() => undefined),
-  makeCss: methods.makeCss || (() => undefined),
   registerAction: methods.registerAction || (() => undefined),
   registerMethod: methods.registerMethod || (() => undefined),
   ...methods,

packages/blockTools/src/emotion.js

@@ -17,16 +17,16 @@
 import createEmotion from 'create-emotion';
 
 const windowContext = window || {};
-let emotion;
 
-// memoize emotion
+const initEmotion = () => {
-if (!windowContext.emotion) {
   const { css, injectGlobal } = createEmotion({
     container: document.getElementById('emotion'),
   });
-  emotion = { css, injectGlobal };
+  windowContext.emotion = { css, injectGlobal };
-} else {
+};
-  emotion = windowContext.emotion;
-}
 
-export default emotion;
+const getEmotionCss = () => {
+  return windowContext.emotion.css;
+};
+
+export { initEmotion, getEmotionCss };

packages/blockTools/src/index.js

@@ -15,10 +15,18 @@
 */
 
 import connectBlock from './connectBlock';
-import emotion from './emotion';
+import { getEmotionCss, initEmotion } from './emotion';
 import ErrorBoundary from './ErrorBoundary';
 import makeCssClass from './makeCssClass.js';
 import mediaToCssObject from './mediaToCssObject.js';
 import useRunAfterUpdate from './useRunAfterUpdate';
 
-export { connectBlock, emotion, ErrorBoundary, makeCssClass, mediaToCssObject, useRunAfterUpdate };
+export {
+  connectBlock,
+  ErrorBoundary,
+  getEmotionCss,
+  initEmotion,
+  makeCssClass,
+  mediaToCssObject,
+  useRunAfterUpdate,
+};

packages/blockTools/src/makeCssClass.js

@@ -16,11 +16,13 @@
 
 import { mergeObjects } from '@lowdefy/helpers';
 import mediaToCssObject from './mediaToCssObject';
-import emotion from './emotion';
+import { getEmotionCss } from './emotion';
 
-const makeCssClass = (styles, options = {}) =>
+const makeCssClass = (styles, options = {}) => {
-  options.styleObjectOnly
+  const css = getEmotionCss();
+  return options.styleObjectOnly
     ? mediaToCssObject(mergeObjects(styles), options)
-    : emotion.css(mediaToCssObject(mergeObjects(styles), options));
+    : css(mediaToCssObject(mergeObjects(styles), options));
+};
 
 export default makeCssClass;

packages/blockTools/tests/makeCssClass.test.js

@@ -15,6 +15,7 @@
 */
 
 import makeCssClass from '../src/makeCssClass';
+import { initEmotion } from '../src/emotion';
 
 const mockCss = jest.fn();
 const mockCssImp = (obj) => ({
@@ -28,6 +29,7 @@ jest.mock('create-emotion', () => () => ({
 beforeEach(() => {
   mockCss.mockReset();
   mockCss.mockImplementation(mockCssImp);
+  initEmotion();
 });
 
 test('object with no media', () => {

packages/express/server.js

@@ -37,4 +37,4 @@ const app = express();
 
 server.applyMiddleware({ app });
 app.use(express.static('shell/dist'));
-app.listen({ port: 4000 }, () => console.log(`🚀 Server ready at http://localhost:4000`));
+app.listen({ port: 3000 }, () => console.log(`🚀 Server ready at http://localhost:3000`));

packages/express/shell/src/Shell.js

@@ -20,7 +20,7 @@ import useDynamicScript from './utils/useDynamicScript';
 
 function Engine() {
   const { ready, failed } = useDynamicScript({
-    url: 'https://unpkg.com/nxjdkxbp/dist/remoteEntry.js',
+    url: 'http://localhost:3001/remoteEntry.js',
   });
 
   if (!ready) {
@@ -31,7 +31,7 @@ function Engine() {
     return <h2>Failed to load dynamic script</h2>;
   }
 
-  const Component = React.lazy(loadComponent('nxjdkxbp', 'Engine'));
+  const Component = React.lazy(loadComponent('lowdefy_renderer', 'Engine'));
 
   return (
     <React.Suspense fallback="Loading Engine">

packages/format/test/getFormatter.test.js

@@ -69,5 +69,5 @@ test('momentHumanizeDuration', () => {
     withSuffix: true,
     thresholds: { d: 7, w: 4 },
   });
-  expect(formatter(604800000)).toEqual('dans a week');
+  expect(formatter(604800000)).toEqual('dans une semaine');
 });

packages/layout/package.json

@@ -44,7 +44,7 @@
     "@babel/core": "7.11.6",
     "@babel/preset-env": "7.11.5",
     "@babel/preset-react": "7.10.4",
-    "@lowdefy/block-tools": "1.0.0",
+    "@lowdefy/block-tools": "1.0.1-experimental.1",
     "babel-jest": "26.5.2",
     "babel-loader": "8.1.0",
     "babel-plugin-import": "1.13.0",

packages/renderer/package.json

@@ -30,6 +30,7 @@
     "@apollo/link-context": "2.0.0-beta.3",
     "@apollo/link-error": "2.0.0-beta.3",
     "@apollo/link-retry": "2.0.0-beta.3",
+    "@lowdefy/block-tools": "1.0.1-experimental.1",
     "graphql": "15.3.0",
     "react": "17.0.0-rc.3",
     "react-dom": "17.0.0-rc.3"

packages/renderer/src/Block.js

@@ -15,9 +15,15 @@
 */
 
 import React from 'react';
+import { connectBlock } from '@lowdefy/block-tools';
 import useDynamicScript from './utils/useDynamicScript';
 import loadComponent from './utils/loadComponent';
 
+const Comp = ({ bl }) => {
+  const CBlock = connectBlock(bl);
+  return <CBlock />;
+};
+
 function Block({ meta }) {
   const { ready, failed } = useDynamicScript({
     url: meta && meta.url,
@@ -39,7 +45,7 @@ function Block({ meta }) {
 
   return (
     <React.Suspense fallback="Loading Block">
-      <Component />
+      <Comp bl={Component} />
     </React.Suspense>
   );
 }

packages/renderer/src/Engine.js

@@ -16,12 +16,14 @@
 
 import React from 'react';
 import { ApolloProvider } from '@apollo/client';
+import { initEmotion } from '@lowdefy/block-tools';
 import useGqlClient from './utils/useGqlClient';
 import Page from './Page';
 
 // const RemoteButton = React.lazy(() => import('block/Button'));
 
 const Engine = () => {
+  initEmotion();
   const client = useGqlClient();
   return (
     <ApolloProvider client={client}>

packages/renderer/src/utils/useGqlClient.js

@@ -24,7 +24,7 @@ import { RetryLink } from '@apollo/link-retry';
 const cache = new InMemoryCache();
 const retryLink = new RetryLink();
 const httpLink = new HttpLink({
-  uri: 'http://localhost:4000/graphql',
+  uri: '/graphql',
 });
 const errorHandler = ({ graphQLErrors, networkError }) => {
   console.log('graphQLErrors', graphQLErrors);

yarn.lock

@@ -2789,7 +2789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lowdefy/block-tools@1.0.0, @lowdefy/block-tools@workspace:packages/blockTools":
+"@lowdefy/block-tools@1.0.1-experimental.1, @lowdefy/block-tools@workspace:packages/blockTools":
   version: 0.0.0-use.local
   resolution: "@lowdefy/block-tools@workspace:packages/blockTools"
   dependencies:
@@ -2971,7 +2971,7 @@ __metadata:
     "@babel/core": 7.11.6
     "@babel/preset-env": 7.11.5
     "@babel/preset-react": 7.10.4
-    "@lowdefy/block-tools": 1.0.0
+    "@lowdefy/block-tools": 1.0.1-experimental.1
     "@lowdefy/type": 1.0.1
     antd: 4.4.2
     babel-jest: 26.5.2
@@ -3062,6 +3062,7 @@ __metadata:
     "@apollo/link-retry": 2.0.0-beta.3
     "@babel/core": 7.11.6
     "@babel/preset-react": 7.10.4
+    "@lowdefy/block-tools": 1.0.1-experimental.1
     babel-loader: 8.1.0
     bundle-loader: 0.5.6
     graphql: 15.3.0