From 953095e5ce3a733ba2d34f4dbed29c6e792e7a86 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Wed, 21 Sep 2022 08:35:48 +0800 Subject: [PATCH] refactor: change SPA to MPA --- .vscode/settings.json | 5 +- config/paths.js | 2 + config/webpack.config.js | 47 +++++++++++----- public/embed.html | 116 +++++++++++++++++++++++++++++++++++++++ public/embed_demo.html | 30 ++++++++++ src/embed.tsx | 15 +++++ src/embed/Chat.tsx | 13 +++++ src/embed/index.tsx | 22 ++++++++ 8 files changed, 234 insertions(+), 16 deletions(-) create mode 100644 public/embed.html create mode 100644 public/embed_demo.html create mode 100644 src/embed.tsx create mode 100644 src/embed/Chat.tsx create mode 100644 src/embed/index.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index a5f9e023..cbd787ce 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -53,5 +53,8 @@ "webrowse" ], "reactSnippets.settings.prettierEnabled": true, - "reactSnippets.settings.importReactOnTop": false + "reactSnippets.settings.importReactOnTop": false, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } diff --git a/config/paths.js b/config/paths.js index 3d008e9f..bf0ae7c6 100644 --- a/config/paths.js +++ b/config/paths.js @@ -58,6 +58,8 @@ module.exports = { appPublic: resolveApp("public"), appHtml: resolveApp("public/index.html"), appIndexJs: resolveModule(resolveApp, "src/index"), + embedAppHtml: resolveApp("public/embed.html"), + embedAppIndexJs: resolveModule(resolveApp, "src/embed"), appPackageJson: resolveApp("package.json"), appSrc: resolveApp("src"), appTsConfig: resolveApp("tsconfig.json"), diff --git a/config/webpack.config.js b/config/webpack.config.js index b2fc1ad1..c06061c6 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -118,7 +118,7 @@ module.exports = function (webpackEnv) { : isEnvDevelopment && "cheap-module-source-map", // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. - entry: paths.appIndexJs, + entry: { main: paths.appIndexJs, embed: paths.embedAppIndexJs }, output: { // The build folder. path: paths.appBuild, @@ -128,7 +128,7 @@ module.exports = function (webpackEnv) { // In development, it does not produce real files. filename: isEnvProduction ? "static/js/[name].[contenthash:8].js" - : isEnvDevelopment && "static/js/bundle.js", + : isEnvDevelopment && "static/js/[name].bundle.js", // There are also additional JS chunk files if you use code splitting. chunkFilename: isEnvProduction ? "static/js/[name].[contenthash:8].chunk.js" @@ -260,18 +260,6 @@ module.exports = function (webpackEnv) { // match the requirements. When no loader matches it will fall // back to the "file" loader at the end of the loader list. oneOf: [ - // TODO: Merge this config once `image/avif` is in the mime-db - // https://github.com/jshttp/mime-db - { - test: [/\.avif$/], - type: "asset", - mimetype: "image/avif", - parser: { - dataUrlCondition: { - maxSize: imageInlineSizeLimit - } - } - }, // "url" loader works like "file" loader except that it embeds assets // smaller than specified limit in bytes as data URLs to avoid requests. // A missing `test` is equivalent to a match. @@ -409,8 +397,37 @@ module.exports = function (webpackEnv) { Object.assign( {}, { + filename: "index.html", inject: true, - template: paths.appHtml + template: paths.appHtml, + chunks: ["main"] + }, + isEnvProduction + ? { + minify: { + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true, + minifyJS: true, + minifyCSS: true, + minifyURLs: true + } + } + : undefined + ) + ), + new HtmlWebpackPlugin( + Object.assign( + {}, + { + filename: "embed.html", + inject: true, + template: paths.embedAppHtml, + chunks: ["embed"] }, isEnvProduction ? { diff --git a/public/embed.html b/public/embed.html new file mode 100644 index 00000000..cac3ab27 --- /dev/null +++ b/public/embed.html @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + VoceChat Embed + + + + + + +
+
+ + + + diff --git a/public/embed_demo.html b/public/embed_demo.html new file mode 100644 index 00000000..16e44a66 --- /dev/null +++ b/public/embed_demo.html @@ -0,0 +1,30 @@ + + + + + + + Vocechat Embed Demo + + + + +
+ +
+ + diff --git a/src/embed.tsx b/src/embed.tsx new file mode 100644 index 00000000..e2074684 --- /dev/null +++ b/src/embed.tsx @@ -0,0 +1,15 @@ +import ReactDOM from "react-dom/client"; +import { Reset } from "styled-reset"; +import Embed from "./embed/index"; +import "./assets/base.css"; +import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride"; + +const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); + +root.render( + <> + + + + +); diff --git a/src/embed/Chat.tsx b/src/embed/Chat.tsx new file mode 100644 index 00000000..df9d2bfe --- /dev/null +++ b/src/embed/Chat.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import styled from "styled-components"; +const Styled = styled.section` + width: 800px; + height: 800px; +`; +type Props = {}; + +const Chat = (props: Props) => { + return Chat; +}; + +export default Chat; diff --git a/src/embed/index.tsx b/src/embed/index.tsx new file mode 100644 index 00000000..31082d84 --- /dev/null +++ b/src/embed/index.tsx @@ -0,0 +1,22 @@ +import { useState } from "react"; +import styled from "styled-components"; +const Styled = styled.aside` + pointer-events: all; +`; +import Chat from "./Chat"; +type Props = {}; + +function Embed({}: Props) { + const [visible, setVisible] = useState(false); + const toggleVisible = () => { + setVisible((prev) => !prev); + }; + return ( + + + {visible && } + + ); +} + +export default Embed;