@knapsack/renderer-react 4.69.9--canary.4768.997c53b.0 → 4.69.9--canary.4739.c87ad2d.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -0
- package/dist/demo-wrapper.d.mts +4 -1
- package/dist/demo-wrapper.d.ts +4 -1
- package/dist/demo-wrapper.js.map +1 -1
- package/dist/demo-wrapper.mjs.map +1 -1
- package/dist/index.d.mts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +135 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +138 -66
- package/dist/index.mjs.map +1 -1
- package/package.json +14 -19
- package/dist/client/init.d.mts +0 -2
- package/dist/client/init.d.ts +0 -2
- package/dist/client/init.js +0 -82
- package/dist/client/init.js.map +0 -1
- package/dist/client/init.mjs +0 -90
- package/dist/client/init.mjs.map +0 -1
- package/dist/types-D2eCZXsg.d.mts +0 -13
- package/dist/types-D2eCZXsg.d.ts +0 -13
package/CHANGELOG.md
CHANGED
@@ -1,3 +1,15 @@
|
|
1
|
+
# v4.69.8 (Thu Sep 12 2024)
|
2
|
+
|
3
|
+
#### 🐛 Bug Fix
|
4
|
+
|
5
|
+
- refactor Renderers for cleaner types [#4746](https://github.com/knapsack-labs/app-monorepo/pull/4746) ([@EvanLovely](https://github.com/EvanLovely))
|
6
|
+
|
7
|
+
#### Authors: 1
|
8
|
+
|
9
|
+
- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
|
10
|
+
|
11
|
+
---
|
12
|
+
|
1
13
|
# v4.69.7 (Wed Sep 11 2024)
|
2
14
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/demo-wrapper.d.mts
CHANGED
@@ -1,5 +1,8 @@
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import {
|
2
|
+
import { DemoWrapperProps } from './index.mjs';
|
3
|
+
import '@knapsack/renderer-webpack-base';
|
4
|
+
import '@knapsack/utils';
|
5
|
+
import '@knapsack/app/renderers';
|
3
6
|
import '@knapsack/types';
|
4
7
|
import '@knapsack/app/types';
|
5
8
|
|
package/dist/demo-wrapper.d.ts
CHANGED
@@ -1,5 +1,8 @@
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import {
|
2
|
+
import { DemoWrapperProps } from './index.js';
|
3
|
+
import '@knapsack/renderer-webpack-base';
|
4
|
+
import '@knapsack/utils';
|
5
|
+
import '@knapsack/app/renderers';
|
3
6
|
import '@knapsack/types';
|
4
7
|
import '@knapsack/app/types';
|
5
8
|
|
package/dist/demo-wrapper.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './
|
1
|
+
{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,4CAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './
|
1
|
+
{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,oBAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
@@ -1,9 +1,17 @@
|
|
1
|
-
import { RendererWebpackBase, Renderer
|
1
|
+
import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
|
2
|
+
import { Except } from '@knapsack/utils';
|
2
3
|
import { Renderable } from '@knapsack/app/renderers';
|
3
|
-
import { RendererId } from '@knapsack/types';
|
4
|
+
import { RendererId, KsJsImport } from '@knapsack/types';
|
4
5
|
import { KnapsackRenderParams } from '@knapsack/app/types';
|
5
|
-
export { D as DemoWrapperProps } from './types-D2eCZXsg.mjs';
|
6
6
|
|
7
|
+
type DemoWrapperProps = {
|
8
|
+
children: React.ReactNode;
|
9
|
+
patternsUsed: {
|
10
|
+
patternId: string;
|
11
|
+
templateId: string;
|
12
|
+
demoId?: string;
|
13
|
+
}[];
|
14
|
+
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
7
15
|
declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
|
8
16
|
/**
|
9
17
|
* `react.js` & `react-dom.js` root relative paths
|
@@ -43,4 +51,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
|
|
43
51
|
getTemplateSuggestions: Renderer['getTemplateSuggestions'];
|
44
52
|
}
|
45
53
|
|
46
|
-
export { KnapsackReactRenderer };
|
54
|
+
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.d.ts
CHANGED
@@ -1,9 +1,17 @@
|
|
1
|
-
import { RendererWebpackBase, Renderer
|
1
|
+
import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
|
2
|
+
import { Except } from '@knapsack/utils';
|
2
3
|
import { Renderable } from '@knapsack/app/renderers';
|
3
|
-
import { RendererId } from '@knapsack/types';
|
4
|
+
import { RendererId, KsJsImport } from '@knapsack/types';
|
4
5
|
import { KnapsackRenderParams } from '@knapsack/app/types';
|
5
|
-
export { D as DemoWrapperProps } from './types-D2eCZXsg.js';
|
6
6
|
|
7
|
+
type DemoWrapperProps = {
|
8
|
+
children: React.ReactNode;
|
9
|
+
patternsUsed: {
|
10
|
+
patternId: string;
|
11
|
+
templateId: string;
|
12
|
+
demoId?: string;
|
13
|
+
}[];
|
14
|
+
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
7
15
|
declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
|
8
16
|
/**
|
9
17
|
* `react.js` & `react-dom.js` root relative paths
|
@@ -43,4 +51,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
|
|
43
51
|
getTemplateSuggestions: Renderer['getTemplateSuggestions'];
|
44
52
|
}
|
45
53
|
|
46
|
-
export { KnapsackReactRenderer };
|
54
|
+
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.js
CHANGED
@@ -64,14 +64,13 @@ function renderUsageTemplate({
|
|
64
64
|
`;
|
65
65
|
}
|
66
66
|
__name(renderUsageTemplate, "renderUsageTemplate");
|
67
|
-
var demoAppName = "DemoApp";
|
68
67
|
function renderDemoAppTemplate({
|
69
|
-
imports
|
68
|
+
imports,
|
70
69
|
children
|
71
70
|
}) {
|
72
71
|
return `${imports}
|
73
72
|
|
74
|
-
function
|
73
|
+
function DemoApp() {
|
75
74
|
return (
|
76
75
|
${children}
|
77
76
|
)
|
@@ -130,14 +129,12 @@ async function getUsage(data) {
|
|
130
129
|
__name(getUsage, "getUsage");
|
131
130
|
async function getDemoAppUsage({
|
132
131
|
children,
|
133
|
-
imports
|
134
|
-
format
|
132
|
+
imports
|
135
133
|
}) {
|
136
134
|
const code = renderDemoAppTemplate({
|
137
135
|
children,
|
138
136
|
imports
|
139
137
|
});
|
140
|
-
if (!format) return code;
|
141
138
|
return (0, import_file_utils.formatCode)({
|
142
139
|
contents: code,
|
143
140
|
path: "x.tsx"
|
@@ -721,9 +718,6 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
|
|
721
718
|
}, "getTasks")
|
722
719
|
});
|
723
720
|
|
724
|
-
// src/types.ts
|
725
|
-
var rendererMetaScriptTagId = "ks-react-meta";
|
726
|
-
|
727
721
|
// src/renderer-react.ts
|
728
722
|
var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
|
729
723
|
import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
|
@@ -748,11 +742,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
748
742
|
id,
|
749
743
|
extension: ".jsx",
|
750
744
|
language: "jsx",
|
751
|
-
webpackConfig
|
752
|
-
extraScripts: [
|
753
|
-
// this is the code in `./client/init.mts`
|
754
|
-
"@knapsack/renderer-react/client"
|
755
|
-
]
|
745
|
+
webpackConfig
|
756
746
|
});
|
757
747
|
this.language = "jsx";
|
758
748
|
this.assets = [];
|
@@ -835,82 +825,167 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
835
825
|
imports: xImports,
|
836
826
|
renderOptions: { pattern, template, demo }
|
837
827
|
}) {
|
838
|
-
const
|
839
|
-
(imp) => imp.type === "extra"
|
828
|
+
const extraImportNames = this.getJsImports().flatMap(
|
829
|
+
(imp) => imp.type === "extra" ? [imp.importInfo.name] : []
|
840
830
|
);
|
841
|
-
const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports:
|
831
|
+
const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: xImports });
|
842
832
|
if (!isDeclaredVarsUnique) {
|
843
833
|
import_app2.log.error(`${nameCollisions.join(", ")} are declared multiple times`, {
|
844
834
|
imports
|
845
835
|
});
|
846
836
|
}
|
847
|
-
const
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
|
854
|
-
|
855
|
-
|
856
|
-
|
857
|
-
template,
|
858
|
-
demo,
|
859
|
-
patternsUsed: imports.flatMap((imp) => {
|
860
|
-
if (imp.type === "pattern-template") {
|
861
|
-
return [
|
862
|
-
{
|
863
|
-
patternId: imp.patternId,
|
864
|
-
templateId: imp.templateId
|
865
|
-
}
|
866
|
-
];
|
837
|
+
const importNames = [
|
838
|
+
...imports.map(({ importInfo: { name } }) => name),
|
839
|
+
...extraImportNames
|
840
|
+
];
|
841
|
+
const patternsUsed = imports.flatMap((imp) => {
|
842
|
+
if (imp.type === "pattern-template") {
|
843
|
+
return [
|
844
|
+
{
|
845
|
+
patternId: imp.patternId,
|
846
|
+
templateId: imp.templateId
|
867
847
|
}
|
868
|
-
|
869
|
-
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
848
|
+
];
|
849
|
+
}
|
850
|
+
if (imp.type === "pattern-template-demo") {
|
851
|
+
return [
|
852
|
+
{
|
853
|
+
patternId: imp.patternId,
|
854
|
+
templateId: imp.templateId,
|
855
|
+
demoId: imp.demoId
|
876
856
|
}
|
877
|
-
|
878
|
-
})
|
857
|
+
];
|
879
858
|
}
|
859
|
+
return [];
|
860
|
+
});
|
861
|
+
const demoWrapperProps = {
|
862
|
+
patternsUsed,
|
863
|
+
pattern,
|
864
|
+
template,
|
865
|
+
demo
|
880
866
|
};
|
867
|
+
const demoWrapperCode = await getUsage({
|
868
|
+
templateName: "DemoWrapper",
|
869
|
+
props: demoWrapperProps,
|
870
|
+
children: `<DemoApp />`
|
871
|
+
// extraProps,
|
872
|
+
});
|
873
|
+
async function renderReact({
|
874
|
+
patterns,
|
875
|
+
theExtraImportNames,
|
876
|
+
ksGlobal
|
877
|
+
}) {
|
878
|
+
if (!ksGlobal) {
|
879
|
+
throw new Error('"window.knapsack" is null');
|
880
|
+
}
|
881
|
+
const components = await ksGlobal.getAllImports({
|
882
|
+
patterns,
|
883
|
+
extras: theExtraImportNames.map((name) => ({ name }))
|
884
|
+
});
|
885
|
+
return components;
|
886
|
+
}
|
887
|
+
__name(renderReact, "renderReact");
|
881
888
|
let code = `
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
889
|
+
|
890
|
+
${renderReact.toString()}
|
891
|
+
${renderReact.name}({
|
892
|
+
ksGlobal: window.knapsack,
|
893
|
+
patterns: ${JSON.stringify(patternsUsed)},
|
894
|
+
theExtraImportNames: ${JSON.stringify(extraImportNames)},
|
895
|
+
}).then((components) => {
|
896
|
+
const { ${importNames.join(", ")} } = components;
|
897
|
+
const root = document.getElementById('render-root');
|
898
|
+
|
899
|
+
${demoApp}
|
900
|
+
|
901
|
+
const reactDomVersion = parseInt(ReactDOM.version.split('.')[0], 10);
|
902
|
+
|
903
|
+
const ReactRendererResult = () => {
|
904
|
+
if (reactDomVersion < 17 || ${this.disableReactStrictMode}){
|
905
|
+
return (
|
906
|
+
<ErrorCatcher>
|
907
|
+
${demoWrapperCode}
|
908
|
+
</ErrorCatcher>
|
909
|
+
)
|
886
910
|
}
|
911
|
+
|
912
|
+
return (
|
913
|
+
<React.StrictMode>
|
914
|
+
<ErrorCatcher>
|
915
|
+
${demoWrapperCode}
|
916
|
+
</ErrorCatcher>
|
917
|
+
</React.StrictMode>
|
918
|
+
)
|
919
|
+
};
|
920
|
+
|
921
|
+
|
922
|
+
if (reactDomVersion > 17){
|
923
|
+
ReactDOM.createRoot(root).render(
|
924
|
+
<ReactRendererResult />
|
925
|
+
)
|
926
|
+
} else {
|
927
|
+
ReactDOM.render(
|
928
|
+
<ReactRendererResult />,
|
929
|
+
root
|
930
|
+
);
|
931
|
+
}
|
932
|
+
}).catch((err) => {
|
933
|
+
console.error(err);
|
934
|
+
const root = document.getElementById('render-root');
|
935
|
+
// Create a new <div> element to contain the error message
|
936
|
+
const errorMsgDiv = document.createElement('div');
|
937
|
+
// Insert the new <div> element before the existing element
|
938
|
+
root.parentNode.insertBefore(errorMsgDiv, root);
|
939
|
+
// add error message so users can see it
|
940
|
+
errorMsgDiv.innerHTML = '<h1>Component Error</h1><p>' + err.message + '</p>';
|
941
|
+
});
|
887
942
|
`;
|
943
|
+
let codeHadError = false;
|
888
944
|
let errorHtmlMsg = "";
|
889
945
|
try {
|
890
|
-
code = await (0, import_renderers.babelCodeForBrowser)({
|
946
|
+
code = await (0, import_renderers.babelCodeForBrowser)({
|
947
|
+
code
|
948
|
+
});
|
891
949
|
} catch (e) {
|
950
|
+
codeHadError = true;
|
892
951
|
console.log(code);
|
893
952
|
console.log("---original code before babel error ^---");
|
894
953
|
console.trace(e.message);
|
895
954
|
code = `console.error(${JSON.stringify(e.message)});`;
|
896
955
|
errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
|
897
956
|
}
|
957
|
+
if (!codeHadError) {
|
958
|
+
try {
|
959
|
+
code = await (0, import_file_utils3.formatCode)({
|
960
|
+
contents: code,
|
961
|
+
path: "x.tsx"
|
962
|
+
// doing this to set format language
|
963
|
+
});
|
964
|
+
} catch (e) {
|
965
|
+
codeHadError = true;
|
966
|
+
console.log(code);
|
967
|
+
console.log("---original code before prettier error ^---");
|
968
|
+
console.trace(e.message);
|
969
|
+
code = `console.error(${JSON.stringify(e.message)});`;
|
970
|
+
errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
|
971
|
+
}
|
972
|
+
}
|
898
973
|
const html = `
|
899
|
-
<script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
|
900
|
-
meta
|
901
|
-
)}</script>
|
902
|
-
<script type="application/javascript">${code}</script>
|
903
|
-
<div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
|
904
974
|
${this.assets.map((asset) => `<script src="${asset}"></script>`).join("\n")}
|
975
|
+
|
905
976
|
${this.createHtmlTagsForAssetPaths({
|
906
977
|
assets: this.getWebpackAssetPaths(),
|
907
978
|
// we need the scripts to finish adding methods to the global knapsack object synchronously before the client-side code runs that is in the <script> tag below
|
908
979
|
scriptTagsAreAsync: false
|
909
980
|
})}
|
910
|
-
|
981
|
+
|
982
|
+
<div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
|
983
|
+
<script type="application/javascript">${code}</script>
|
984
|
+
${errorHtmlMsg}
|
985
|
+
|
911
986
|
`;
|
912
987
|
return {
|
913
|
-
ok: !
|
988
|
+
ok: !codeHadError,
|
914
989
|
html: await (0, import_file_utils3.formatCode)({
|
915
990
|
contents: html,
|
916
991
|
path: "x.html"
|
@@ -971,8 +1046,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
971
1046
|
const [demoAppUsage, demoApp] = await Promise.all([
|
972
1047
|
getDemoAppUsage({
|
973
1048
|
children: usage,
|
974
|
-
imports: importCode
|
975
|
-
format: true
|
1049
|
+
imports: importCode
|
976
1050
|
}),
|
977
1051
|
getDemoAppUsage({
|
978
1052
|
children: usage
|