mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-03-31 15:20:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request from lowdefy/render-loading

Browse Source 
Cleanup loading render
This commit is contained in:
Sam 2020-10-15 16:55:08 +02:00 committed by GitHub
commit 16a5a477fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 327 additions and 199 deletions

43
.pnp.js generated

@ -5006,16 +5006,19 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@lowdefy/express", "workspace:packages/express"],
["@babel/core", "npm:7.12.0"],
["@babel/preset-react", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:7.10.4"],
["@lowdefy/block-tools", "workspace:packages/blockTools"],
["@lowdefy/graphql", "workspace:packages/graphql"],
["apollo-server-express", "virtual:b48bfc75325537b9d641f357739049b25dac71eb86a05d5744ecd259c67ce3d1110d501b0f5cd21b669aa2cda1c9f77cfe9c3e49e1202cba9683bd40f09e88bb#npm:2.18.2"],
["babel-loader", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:8.1.0"],
["bundle-loader", "npm:0.5.6"],
["css-loader", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:4.3.0"],
["express", "npm:4.17.1"],
["graphql", "npm:15.3.0"],
["html-webpack-plugin", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:4.5.0"],
["nodemon", "npm:2.0.5"],
["react", "npm:17.0.0-rc.3"],
["react-dom", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:17.0.0-rc.3"],
["style-loader", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:2.0.0"],
["webpack", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:5.1.0"],
["webpack-cli", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:4.0.0"],
["webpack-dev-server", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:3.11.0"],
@ -10621,6 +10624,31 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
],
"linkType": "HARD",
}],
["virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:4.3.0", {
"packageLocation": "./.yarn/$$virtual/css-loader-virtual-ba715e2171/0/cache/css-loader-npm-4.3.0-33464197c9-1f441ac567.zip/node_modules/css-loader/",
"packageDependencies": [
["css-loader", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:4.3.0"],
["@types/webpack", null],
["camelcase", "npm:6.1.0"],
["cssesc", "npm:3.0.0"],
["icss-utils", "npm:4.1.1"],
["loader-utils", "npm:2.0.0"],
["postcss", "npm:7.0.35"],
["postcss-modules-extract-imports", "npm:2.0.0"],
["postcss-modules-local-by-default", "npm:3.0.3"],
["postcss-modules-scope", "npm:2.2.0"],
["postcss-modules-values", "npm:3.0.0"],
["postcss-value-parser", "npm:4.1.0"],
["schema-utils", "npm:2.7.1"],
["semver", "npm:7.3.2"],
["webpack", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:5.1.0"]
],
"packagePeers": [
"@types/webpack",
"webpack"
],
"linkType": "HARD",
}],
["virtual:e7dd2bdbec1b3ec399e5f3318d0a58728583b58181f43cb8f4f372a1b2b9707e2ffcf76bd80aad3c5c64a731754028a8070020628ca4fa0a02fe260c179762ae#npm:4.3.0", {
"packageLocation": "./.yarn/$$virtual/css-loader-virtual-168e7119ef/0/cache/css-loader-npm-4.3.0-33464197c9-1f441ac567.zip/node_modules/css-loader/",
"packageDependencies": [
@ -22664,6 +22692,21 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
],
"linkType": "HARD",
}],
["virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:2.0.0", {
"packageLocation": "./.yarn/$$virtual/style-loader-virtual-868b905861/0/cache/style-loader-npm-2.0.0-b9a5c4a2aa-ffc3054882.zip/node_modules/style-loader/",
"packageDependencies": [
["style-loader", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:2.0.0"],
["@types/webpack", null],
["loader-utils", "npm:2.0.0"],
["schema-utils", "npm:3.0.0"],
["webpack", "virtual:acf8ebf79a461c4f9f2ee32d35604720e52d54fc65cacbf3e944b2ad79cd4f17f95a2cb60cf4b37ca284c4f89981c732c25542cf20e548286d7eb31af1a6edda#npm:5.1.0"]
],
"packagePeers": [
"@types/webpack",
"webpack"
],
"linkType": "HARD",
}],
["virtual:e7dd2bdbec1b3ec399e5f3318d0a58728583b58181f43cb8f4f372a1b2b9707e2ffcf76bd80aad3c5c64a731754028a8070020628ca4fa0a02fe260c179762ae#npm:2.0.0", {
"packageLocation": "./.yarn/$$virtual/style-loader-virtual-f500aff369/0/cache/style-loader-npm-2.0.0-b9a5c4a2aa-ffc3054882.zip/node_modules/style-loader/",
"packageDependencies": [

1
.prettierrc

@ -1,5 +1,6 @@
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}

2
packages/blockTools/demo/Spinner.js

@ -26,7 +26,7 @@ const Examples = () => (
<Wrapper title="Spinner properties.height: 100 :">
<Spinner properties={{ height: 100 }} />
</Wrapper>
<Wrapper title="Spinner container style= height: 200 :" style={{ height: 200 }}>
<Wrapper title="Spinner container style= height: 500 :" style={{ height: 500 }}>
<Spinner />
</Wrapper>
<Wrapper title="Spinner properties.message = loading">

46
packages/blockTools/src/Loading.js

@ -1,7 +1,47 @@
import React from 'react';
/*
Copyright 2020 Lowdefy, Inc
const Loading = () => {
return <div>Loading</div>;
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 IconSpinner from './Spinner/IconSpinner';
import Skeleton from './Skeleton/Skeleton';
import SkeletonAvatar from './Skeleton/SkeletonAvatar';
import SkeletonButton from './Skeleton/SkeletonButton';
import SkeletonInput from './Skeleton/SkeletonInput';
import SkeletonParagraph from './Skeleton/SkeletonParagraph';
import Spinner from './Spinner/Spinner';
const Loading = ({ type, properties }) => {
switch (type) {
case 'IconSpinner':
return <IconSpinner properties={properties} />;
case 'Skeleton':
return <Skeleton properties={properties} />;
case 'SkeletonAvatar':
return <SkeletonAvatar properties={properties} />;
case 'SkeletonButton':
return <SkeletonButton properties={properties} />;
case 'SkeletonInput':
return <SkeletonInput properties={properties} />;
case 'SkeletonParagraph':
return <SkeletonParagraph properties={properties} />;
case 'Spinner':
return <Spinner properties={properties} />;
default:
return <div />;
}
};
export default Loading;

8
packages/blockTools/src/Spinner/Spinner.js

@ -34,9 +34,11 @@ const Loading = ({ properties, methods }) => {
color={properties.color}
barColor={properties.barColor || (properties.shaded === true ? '#f1f1f1' : '#fff')}
/>
<div className={methods.makeCssClass([{ textAlign: 'center' }, properties.style])}>
{properties.message}
</div>
{properties.message && (
<div className={methods.makeCssClass([{ textAlign: 'center' }, properties.style])}>
{properties.message}
</div>
)}
</div>
</div>
);

2
packages/blockTools/src/index.js

@ -19,6 +19,7 @@ import ErrorBoundary from './ErrorBoundary';
import makeCssClass from './makeCssClass.js';
import mediaToCssObject from './mediaToCssObject.js';
import IconSpinner from './Spinner/IconSpinner';
import Loading from './Loading';
import Skeleton from './Skeleton/Skeleton';
import SkeletonAvatar from './Skeleton/SkeletonAvatar';
import SkeletonButton from './Skeleton/SkeletonButton';
@ -31,6 +32,7 @@ export {
blockDefaults,
ErrorBoundary,
IconSpinner,
Loading,
makeCssClass,
mediaToCssObject,
Skeleton,

5
packages/express/config/pages/page1.json

@ -18,7 +18,10 @@
"url": "http://localhost:3002/remoteEntry.js",
"scope": "lowdefy_blocks_antd",
"module": "Button",
"category": "display"
"category": "display",
"loading": {
"type": "SkeletonButton"
}
},
"type": "Button"
}

5
packages/express/package.json

@ -26,9 +26,10 @@
"clean": "rm -rf shell/dist",
"prepublishOnly": "yarn build",
"start": "nodemon server.js",
"dev": "webpack-dev-server --open --config webpack.dev.js"
"dev": "webpack serve --config webpack.dev.js"
},
"dependencies": {
"@lowdefy/block-tools": "1.0.1-experimental.1",
"@lowdefy/graphql": "0.0.0-experimental.0",
"apollo-server-express": "2.18.2",
"express": "4.17.1",
@ -42,7 +43,9 @@
"@babel/preset-react": "7.10.4",
"babel-loader": "8.1.0",
"bundle-loader": "0.5.6",
"css-loader": "4.3.0",
"html-webpack-plugin": "4.5.0",
"style-loader": "2.0.0",
"webpack": "5.1.0",
"webpack-cli": "4.0.0",
"webpack-dev-server": "3.11.0",

25
packages/express/shell/src/Shell.js

@ -1,20 +1,21 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 { Loading } from '@lowdefy/block-tools';
import loadComponent from './utils/loadComponent';
import useDynamicScript from './utils/useDynamicScript';
@ -24,7 +25,7 @@ function Engine() {
});
if (!ready) {
return <h2>Loading dynamic script</h2>;
return <Loading type="Spinner" properties={{ height: '100vh' }} />;
}
if (failed) {
@ -34,7 +35,7 @@ function Engine() {
const Component = React.lazy(loadComponent('lowdefy_renderer', 'Renderer'));
return (
<React.Suspense fallback="Loading Renderer">
<React.Suspense fallback={<Loading type="Spinner" properties={{ height: '100vh' }} />}>
<Component />
</React.Suspense>
);

20
packages/express/shell/src/bootstrap.js vendored

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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';

20
packages/express/shell/src/index.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 from './bootstrap';

20
packages/express/shell/src/utils/loadComponent.js

@ -1,18 +1,18 @@
/* eslint-disable no-undef */
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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.
*/
function loadComponent(scope, module) {

20
packages/express/shell/src/utils/useDynamicScript.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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';

11
packages/express/webpack.common.js

@ -26,6 +26,17 @@ module.exports = {
presets: ['@babel/preset-react'],
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader', // translates CSS into CommonJS
},
],
},
],
},
plugins: [

24
packages/renderer/src/Renderer.js

@ -1,24 +1,24 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 { BrowserRouter, Route, Redirect, Switch, useLocation } from 'react-router-dom';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
import { ErrorBoundary } from '@lowdefy/block-tools';
import { ErrorBoundary, Loading } from '@lowdefy/block-tools';
import get from '@lowdefy/get';
import useGqlClient from './utils/graphql/useGqlClient';
@ -76,8 +76,8 @@ const GET_ROOT = gql`
const RootContext = ({ children, client }) => {
const { data, loading, error } = useQuery(GET_ROOT);
if (loading) return <Loading type="Spinner" properties={{ height: '100vh' }} />;
if (error) return <h1>Error</h1>;
if (loading) return <h1>Loading Root Context</h1>;
return (
<>

20
packages/renderer/src/bootstrap.js vendored

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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';

16
packages/renderer/src/index.css

@ -1,3 +1,19 @@
/*
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.
*/
body {
margin: 0;
padding: 0;

20
packages/renderer/src/index.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 from './bootstrap';

26
packages/renderer/src/page/Page.js

@ -43,8 +43,7 @@ const PageContext = ({ rootContext }) => {
variables: { id: pageId },
});
if (loading) {
console.log('loading');
return <Loading />;
return <Loading type="Spinner" properties={{ height: '100vh' }} />;
}
// if (error) throw error;
if (error) {
@ -53,11 +52,9 @@ const PageContext = ({ rootContext }) => {
}
// redirect 404
if (!data.page) return <Redirect to="/404" />;
return (
<>
<Helmet pageProperties={get(data.page, 'properties', { default: {} })} />
<div>Hello</div>
<div id={pageId}>
<Context
block={{
@ -73,18 +70,15 @@ const PageContext = ({ rootContext }) => {
contextId={`root:${pageId}`}
pageId={pageId}
rootContext={rootContext}
render={(context) => {
console.log('Page', context);
return (
<Block
block={context.RootBlocks.map[data.page.blockId]}
Blocks={context.RootBlocks}
context={context}
pageId={pageId}
rootContext={rootContext}
/>
);
}}
render={(context) => (
<Block
block={context.RootBlocks.map[data.page.blockId]}
Blocks={context.RootBlocks}
context={context}
pageId={pageId}
rootContext={rootContext}
/>
)}
/>
</div>
</>

45
packages/renderer/src/page/block/Block.js

@ -17,6 +17,7 @@
import React, { Suspense } from 'react';
import { ErrorBoundary, Loading } from '@lowdefy/block-tools';
import get from '@lowdefy/get';
import LoadBlock from './LoadBlock';
import Defaults from './Defaults';
@ -26,31 +27,35 @@ import WatchCache from './WatchCache';
const Block = ({ block, Blocks, context, pageId, rootContext }) => {
return (
<ErrorBoundary>
<Suspense fallback={<Loading />}>
<Suspense
fallback={
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
}
>
<LoadBlock
meta={block.meta}
render={(Comp) => (
<Defaults
Component={Comp}
render={(CompWithDefaults) => {
console.log('block', context);
return (
<WatchCache
block={block}
rootContext={rootContext}
render={() => (
<CategorySwitch
Component={CompWithDefaults}
block={block}
Blocks={Blocks}
context={context}
pageId={pageId}
rootContext={rootContext}
/>
)}
/>
);
}}
render={(CompWithDefaults) => (
<WatchCache
block={block}
rootContext={rootContext}
render={() => (
<CategorySwitch
Component={CompWithDefaults}
block={block}
Blocks={Blocks}
context={context}
pageId={pageId}
rootContext={rootContext}
/>
)}
/>
)}
/>
)}
/>

3
packages/renderer/src/page/block/CategorySwitch.js

@ -24,6 +24,9 @@ import Context from './Context';
import List from './List';
const CategorySwitch = ({ block, Blocks, Component, context, pageId, rootContext }) => {
if (block.eval.visible === false)
return <div id={`vs-${block.blockId}`} style={{ display: 'none' }} />;
switch (block.meta.category) {
case 'context':
return (

12
packages/renderer/src/page/block/Context.js

@ -15,22 +15,20 @@
*/
import React from 'react';
import { Loading, makeCssClass } from '@lowdefy/block-tools';
import { Loading } from '@lowdefy/block-tools';
import get from '@lowdefy/get';
import useContext from './useContext';
const Context = ({ block, contextId, pageId, render, rootContext }) => {
const { context, loading, error } = useContext({ block, pageId, rootContext, contextId });
if (loading) {
// TODO
if (loading)
return (
<Loading
meta={block.meta}
methods={{ makeCssClass }}
blockStyle={(block.eval && block.eval.style) || block.style}
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
);
}
if (error) throw error;
return render(context);

1
packages/renderer/src/page/block/Defaults.js

@ -14,7 +14,6 @@
limitations under the License.
*/
import React from 'react';
import { blockDefaults } from '@lowdefy/block-tools';
const Defaults = ({ Component, render }) => render(blockDefaults(Component));

9
packages/renderer/src/page/block/LoadBlock.js

@ -15,6 +15,9 @@
*/
import React, { lazy } from 'react';
import { Loading } from '@lowdefy/block-tools';
import get from '@lowdefy/get';
import useDynamicScript from '../../utils/useDynamicScript';
import loadComponent from '../../utils/loadComponent';
@ -22,15 +25,17 @@ const Components = {};
const LoadBlock = ({ meta, render }) => {
const typeId = `${meta.scope}:${meta.module}`;
console.log('LoadBlock', meta);
const { ready, failed } = useDynamicScript({
url: meta.url,
});
if (!Components[typeId]) {
if (!ready) {
return <h2>Loading dynamic script: {meta.url}</h2>;
return (
<Loading properties={get(meta, 'loading.properties')} type={get(meta, 'loading.type')} />
);
}
if (failed) {
// TODO
return <h2>Failed to load dynamic script: {meta.url}</h2>;
}
Components[typeId] = lazy(loadComponent(meta.scope, meta.module));

19
packages/renderer/src/page/block/WatchCache.js

@ -15,7 +15,9 @@
*/
import React from 'react';
import get from '@lowdefy/get';
import { useQuery, gql } from '@apollo/client';
import { Loading } from '@lowdefy/block-tools';
const getBlock = gql`
query getBlock($id: String!) {
@ -27,7 +29,6 @@ const getBlock = gql`
`;
const WatchCache = ({ block, render, rootContext }) => {
console.log('watch', block);
const { loading, error, data } = useQuery(getBlock, {
variables: {
id: `BlockClass:${block.id}`,
@ -35,17 +36,15 @@ const WatchCache = ({ block, render, rootContext }) => {
client: rootContext.client,
});
if (loading) return 'Loading cache';
if (loading || get(data, 'block.loading'))
return (
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
);
if (error) throw error;
// // TODO: move to switch
// if (block.eval.visible === false)
// return <div id={`vs-${block.blockId}`} style={{ display: 'none' }} />;
console.log(block.id, data);
if (data.block.loading) {
return 'Loading data.block.loading';
}
console.log('PASS');
return render();
};

20
packages/renderer/src/page/block/updateBlock.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 { gql } from '@apollo/client';

20
packages/renderer/src/utils/graphql/schema.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 { gql } from '@apollo/client';

20
packages/renderer/src/utils/graphql/useGqlClient.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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 { useState } from 'react';

20
packages/renderer/src/utils/loadComponent.js

@ -1,19 +1,19 @@
/* eslint-disable no-undef */
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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.
*/
function loadComponent(scope, module) {

20
packages/renderer/src/utils/useDynamicScript.js

@ -1,17 +1,17 @@
/*
Copyright 2020 Lowdefy, Inc
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
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
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.
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';

3
yarn.lock

@ -3214,16 +3214,19 @@ __metadata:
dependencies:
"@babel/core": 7.12.0
"@babel/preset-react": 7.10.4
"@lowdefy/block-tools": 1.0.1-experimental.1
"@lowdefy/graphql": 0.0.0-experimental.0
apollo-server-express: 2.18.2
babel-loader: 8.1.0
bundle-loader: 0.5.6
css-loader: 4.3.0
express: 4.17.1
graphql: 15.3.0
html-webpack-plugin: 4.5.0
nodemon: 2.0.5
react: 17.0.0-rc.3
react-dom: 17.0.0-rc.3
style-loader: 2.0.0
webpack: 5.1.0
webpack-cli: 4.0.0
webpack-dev-server: 3.11.0