From e5d6554979e03502c0ce4df55fa9447d818fc5e5 Mon Sep 17 00:00:00 2001 From: sebastian correa Date: Fri, 29 Jan 2021 12:20:25 -0500 Subject: [PATCH] remember to reert the change son webpack about devtools --- config/run.js | 23 ++++++++++++++-- config/webpack.config.js | 6 +---- src/A.tsx | 4 --- src/App.tsx | 6 ++--- src/Liam.tsx | 4 +++ src/server/index.tsx | 58 +++++++++++++++++++++------------------- 6 files changed, 60 insertions(+), 41 deletions(-) delete mode 100644 src/A.tsx create mode 100644 src/Liam.tsx diff --git a/config/run.js b/config/run.js index b41ba28..8572713 100644 --- a/config/run.js +++ b/config/run.js @@ -1,11 +1,30 @@ const lServer = require("@loadable/server") -const moduleWithfault = require('../build/static/js/bundle') +// const moduleWithfault = require('../build/static/js/bundle') const path = require("path") const statsFile = path.resolve('build/loadable-stats.json') // We create an extractor from the statsFile +const React = require("react") const extractor = new lServer.ChunkExtractor({ statsFile }) -moduleWithfault.default(extractor,'/category' ) +const {renderToString} = require("react-dom/server") + +const {default:App} = extractor.requireEntrypoint() + +const mockLocation ='/category' + +const jsx = extractor.collectChunks(React.createElement(App, {location:mockLocation}, null)) + +const reactDom = renderToString(jsx) + +console.log(reactDom) + +// console.log(jsx) + +// const reactDom = renderToString(jsx) + +// import {renderToString} from 'react-dom/server' + +// moduleWithfault.default(extractor,'/category' ) debugger; \ No newline at end of file diff --git a/config/webpack.config.js b/config/webpack.config.js index 98e9d7a..4389cf9 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -182,11 +182,7 @@ module.exports = function (webpackEnv) { mode: isEnvProduction ? 'production' : isEnvDevelopment ? 'development' : isEnvServer && 'none', // Stop compilation early in production bail: isProdOrServer, - devtool: isProdOrServer - ? shouldUseSourceMap - ? 'source-map' - : false - : isEnvDevelopment && 'cheap-module-source-map', + devtool: "none", // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. entry: diff --git a/src/A.tsx b/src/A.tsx deleted file mode 100644 index e24ff6f..0000000 --- a/src/A.tsx +++ /dev/null @@ -1,4 +0,0 @@ -const A = () => 'AAAAAAAAAAAAAAAAAAAAA' - - -export default A \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 9217d67..9bc159f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,11 +9,11 @@ console.log("🚀 -------------------------------------") console.log("🚀 APP.tsx") console.log("🚀 -------------------------------------") -const A = loadable(() =>{ +const Liam = loadable(() =>{ console.log("🚀 -------------------------------------") console.log("🚀 ~ file: triggering lodable") console.log("🚀 -------------------------------------") - return (import('./A') as any).then((x:any)=>{ + return (import('./Liam') as any).then((x:any)=>{ console.log("🚀 -------------------------------------") console.log("🚀 ~ file: lodable promise resolve", x) console.log("🚀 -------------------------------------") @@ -26,7 +26,7 @@ const Category = () => (

Category

under Category

- +
); diff --git a/src/Liam.tsx b/src/Liam.tsx new file mode 100644 index 0000000..67ae896 --- /dev/null +++ b/src/Liam.tsx @@ -0,0 +1,4 @@ +const Liam = () => 'SUPERLIAM' + + +export default Liam \ No newline at end of file diff --git a/src/server/index.tsx b/src/server/index.tsx index dd145c0..c76f1ab 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -1,38 +1,42 @@ -import React from 'react' -import {renderToString} from 'react-dom/server' -import App from '../App' ; +// import React from 'react' +// import {renderToString} from 'react-dom/server' +// import App from '../App' ; -const renderK = (extractor: any, location?: string) =>{ +// const renderK = (extractor: any, location?: string) =>{ - console.info('renderK kykelyn') - const jsx = extractor.collectChunks() +// console.info('renderK kykelyn') +// const jsx = extractor.collectChunks() - console.log(jsx) +// console.log(jsx) - const reactDom = renderToString(jsx) - console.log("🚀 ------------------------------------------------------------") - console.log("🚀 ~ file: index.tsx ~ line 15 ~ renderK ~ reactDom", reactDom) - console.log("🚀 ------------------------------------------------------------") +// const reactDom = renderToString(jsx) +// console.log("🚀 ------------------------------------------------------------") +// console.log("🚀 ~ file: index.tsx ~ line 15 ~ renderK ~ reactDom", reactDom) +// console.log("🚀 ------------------------------------------------------------") - const scriptTags = extractor.getScriptTags() // or extractor.getScriptElements(); - console.log("🚀 ----------------------------------------------------------------") - console.log("🚀 ~ file: index.tsx ~ line 18 ~ renderK ~ scriptTags", scriptTags) - console.log("🚀 ----------------------------------------------------------------") - // You can also collect your "preload/prefetch" links - const linkTags = extractor.getLinkTags() // or extractor.getLinkElements(); - console.log("🚀 ------------------------------------------------------------") - console.log("🚀 ~ file: index.tsx ~ line 23 ~ renderK ~ linkTags", linkTags) - console.log("🚀 ------------------------------------------------------------") - // And you can even collect your style tags (if you use "mini-css-extract-plugin") - const styleTags = extractor.getStyleTags() // or extractor.getStyleElements(); - console.log("🚀 --------------------------------------------------------------") - console.log("🚀 ~ file: index.tsx ~ line 28 ~ renderK ~ styleTags", styleTags) - console.log("🚀 --------------------------------------------------------------") +// const scriptTags = extractor.getScriptTags() // or extractor.getScriptElements(); +// console.log("🚀 ----------------------------------------------------------------") +// console.log("🚀 ~ file: index.tsx ~ line 18 ~ renderK ~ scriptTags", scriptTags) +// console.log("🚀 ----------------------------------------------------------------") +// // You can also collect your "preload/prefetch" links +// const linkTags = extractor.getLinkTags() // or extractor.getLinkElements(); +// console.log("🚀 ------------------------------------------------------------") +// console.log("🚀 ~ file: index.tsx ~ line 23 ~ renderK ~ linkTags", linkTags) +// console.log("🚀 ------------------------------------------------------------") +// // And you can even collect your style tags (if you use "mini-css-extract-plugin") +// const styleTags = extractor.getStyleTags() // or extractor.getStyleElements(); +// console.log("🚀 --------------------------------------------------------------") +// console.log("🚀 ~ file: index.tsx ~ line 28 ~ renderK ~ styleTags", styleTags) +// console.log("🚀 --------------------------------------------------------------") -} +// } -export default renderK \ No newline at end of file +// export default renderK + +export { default } from '../App' + +export const hello = 'hello' \ No newline at end of file