From 00ecc0e5e7da876c811e3b083eac357874d67d25 Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Wed, 24 Mar 2021 13:32:26 -0700 Subject: [PATCH] update create-app-demo sample --- packages/xarc-create-app/package.json | 2 +- packages/xarc-create-app/template/_package.js | 4 ++++ samples/create-app-demo/babel.config.js | 2 +- samples/create-app-demo/package.json | 4 ++++ samples/create-app-demo/src/app.tsx | 6 +++--- samples/create-app-demo/src/demo1/index.tsx | 4 ++-- samples/create-app-demo/src/demo2/index.tsx | 20 +++++++++---------- samples/create-app-demo/src/demo2/reducers.ts | 6 +++--- samples/create-app-demo/src/demo3/index.tsx | 8 ++++---- .../src/demo3/react-query-fetch.ts | 4 ++-- samples/create-app-demo/src/home/index.tsx | 10 +++++----- .../create-app-demo/src/home/static-props.tsx | 2 +- samples/create-app-demo/src/server/config.ts | 8 ++++---- samples/create-app-demo/src/server/index.ts | 4 ++-- samples/create-app-demo/src/server/routes.ts | 8 ++++---- samples/create-app-demo/xrun-tasks.ts | 8 ++++---- 16 files changed, 54 insertions(+), 46 deletions(-) diff --git a/packages/xarc-create-app/package.json b/packages/xarc-create-app/package.json index 3ffe7c3fb..f17c5dc57 100644 --- a/packages/xarc-create-app/package.json +++ b/packages/xarc-create-app/package.json @@ -54,7 +54,7 @@ "prettier": "^2.2.1", "prompts": "^2.3.2", "run-verify": "^1.2.5", - "shcmd": "^0.7.9", + "shcmd": "^0.8.4", "sinon": "^7.2.6", "sinon-chai": "^3.3.0", "webpack": "^4.41.0", diff --git a/packages/xarc-create-app/template/_package.js b/packages/xarc-create-app/template/_package.js index 1069ec554..ec9f2eb87 100644 --- a/packages/xarc-create-app/template/_package.js +++ b/packages/xarc-create-app/template/_package.js @@ -31,6 +31,9 @@ module.exports = (base, merge) => { node: ">= 12", npm: ">= 6", }, + prettier: { + printWidth: 100, + }, dependencies: { "@babel/runtime": "^7.12.5", "@xarc/app": "^9.0.3", // version will come from ../package.json @@ -44,6 +47,7 @@ module.exports = (base, merge) => { "@xarc/app-dev": "^9.0.3", // version will come from ../package.json "@xarc/opt-postcss": "^1.0.0", "@xarc/opt-stylus": "^1.0.0", + prettier: "^2.2.1", "ts-node": "^9.1.1", typescript: "^4.1.3", }, diff --git a/samples/create-app-demo/babel.config.js b/samples/create-app-demo/babel.config.js index dfaac876b..030f5e192 100644 --- a/samples/create-app-demo/babel.config.js +++ b/samples/create-app-demo/babel.config.js @@ -3,5 +3,5 @@ const { babelPresetFile } = require("@xarc/app-dev"); module.exports = { - presets: [babelPresetFile] + presets: [babelPresetFile], }; diff --git a/samples/create-app-demo/package.json b/samples/create-app-demo/package.json index b32acfa83..40f176550 100644 --- a/samples/create-app-demo/package.json +++ b/samples/create-app-demo/package.json @@ -29,6 +29,9 @@ "node": ">= 12", "npm": ">= 6" }, + "prettier": { + "printWidth": 100 + }, "dependencies": { "@babel/runtime": "^7.12.5", "@xarc/app": "^9.0.4", @@ -42,6 +45,7 @@ "@xarc/app-dev": "^9.0.4", "@xarc/opt-postcss": "^1.0.0", "@xarc/opt-stylus": "^1.0.0", + "prettier": "^2.2.1", "ts-node": "^9.1.1", "typescript": "^4.1.3" } diff --git a/samples/create-app-demo/src/app.tsx b/samples/create-app-demo/src/app.tsx index e47936ca7..63d4e6b42 100644 --- a/samples/create-app-demo/src/app.tsx +++ b/samples/create-app-demo/src/app.tsx @@ -2,17 +2,17 @@ import { declareSubApp, xarcV2 } from "@xarc/react"; export const home = declareSubApp({ name: "home", - getModule: () => import("./home") + getModule: () => import("./home"), }); export const Demo2 = declareSubApp({ name: "demo2", - getModule: () => import("./demo2") + getModule: () => import("./demo2"), }); export const Demo3 = declareSubApp({ name: "demo3", - getModule: () => import("./demo3") + getModule: () => import("./demo3"), }); xarcV2.debug("app.tsx"); diff --git a/samples/create-app-demo/src/demo1/index.tsx b/samples/create-app-demo/src/demo1/index.tsx index f4201d343..b655aef86 100644 --- a/samples/create-app-demo/src/demo1/index.tsx +++ b/samples/create-app-demo/src/demo1/index.tsx @@ -5,7 +5,7 @@ import styles from "../styles/demo1.mod.styl"; // CSS module support for .css import styles2 from "../styles/demo1.mod.css"; -const Demo1 = props => { +const Demo1 = (props) => { return (

subapp demo1 (.styl css module blue color)

@@ -19,5 +19,5 @@ const Demo1 = props => { }; export const subapp: ReactSubApp = { - Component: Demo1 + Component: Demo1, }; diff --git a/samples/create-app-demo/src/demo2/index.tsx b/samples/create-app-demo/src/demo2/index.tsx index 8f7ddc70c..7b785cbf6 100644 --- a/samples/create-app-demo/src/demo2/index.tsx +++ b/samples/create-app-demo/src/demo2/index.tsx @@ -12,17 +12,17 @@ export { reduxReducers } from "./reducers"; const incNumber = () => { return { - type: "INC_NUMBER" + type: "INC_NUMBER", }; }; const decNumber = () => { return { - type: "DEC_NUMBER" + type: "DEC_NUMBER", }; }; -const Demo2 = props => { +const Demo2 = (props) => { const { value, dispatch } = props; return ( @@ -33,7 +33,7 @@ const Demo2 = props => { marginTop: "15px", border: "solid", marginLeft: "15%", - marginRight: "15%" + marginRight: "15%", }} >

subapp demo2 with Redux

@@ -45,20 +45,20 @@ const Demo2 = props => { ); }; -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { value: state.number.value }; }; export const subapp: ReactSubApp = { - Component: connect(mapStateToProps, dispatch => ({ dispatch }))(Demo2), + Component: connect(mapStateToProps, (dispatch) => ({ dispatch }))(Demo2), wantFeatures: [ reduxFeature({ React, shareStore: true, reducers: true, // true => read the reduxReducers export from this file - prepare: async initialState => { + prepare: async (initialState) => { return { initialState: initialState || { number: { value: 999 } } }; - } - }) - ] + }, + }), + ], }; diff --git a/samples/create-app-demo/src/demo2/reducers.ts b/samples/create-app-demo/src/demo2/reducers.ts index 1c885bc4a..b40325ff4 100644 --- a/samples/create-app-demo/src/demo2/reducers.ts +++ b/samples/create-app-demo/src/demo2/reducers.ts @@ -1,11 +1,11 @@ const number = (store = { value: 0 }, action) => { if (action.type === "INC_NUMBER") { return { - value: store.value + 1 + value: store.value + 1, }; } else if (action.type === "DEC_NUMBER") { return { - value: store.value - 1 + value: store.value - 1, }; } @@ -13,5 +13,5 @@ const number = (store = { value: 0 }, action) => { }; export const reduxReducers = { - number + number, }; diff --git a/samples/create-app-demo/src/demo3/index.tsx b/samples/create-app-demo/src/demo3/index.tsx index fffee3800..2e59ee705 100644 --- a/samples/create-app-demo/src/demo3/index.tsx +++ b/samples/create-app-demo/src/demo3/index.tsx @@ -22,7 +22,7 @@ const Demo3 = () => { marginTop: "15px", border: "solid", marginLeft: "15%", - marginRight: "15%" + marginRight: "15%", }} >

subapp demo3 with react-query

@@ -38,7 +38,7 @@ export const subapp: ReactSubApp = { wantFeatures: [ reactQueryFeature({ React, - serverModule: require.resolve("./react-query-fetch") - }) - ] + serverModule: require.resolve("./react-query-fetch"), + }), + ], }; diff --git a/samples/create-app-demo/src/demo3/react-query-fetch.ts b/samples/create-app-demo/src/demo3/react-query-fetch.ts index dfa87d808..30b19c867 100644 --- a/samples/create-app-demo/src/demo3/react-query-fetch.ts +++ b/samples/create-app-demo/src/demo3/react-query-fetch.ts @@ -5,7 +5,7 @@ const maxDelay = 50; export const demo3QueryFn = async ({ queryKey }) => { const delay = Math.floor(Math.random() * maxDelay); - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(resolve, delay); }).then(() => { return { msg: "react-query", queryKey, delay }; @@ -17,6 +17,6 @@ export const prefetchQuery = async ({ queryClient, ssrData }) => { return { queryClient, - dehydratedState: dehydrate(queryClient) + dehydratedState: dehydrate(queryClient), }; }; diff --git a/samples/create-app-demo/src/home/index.tsx b/samples/create-app-demo/src/home/index.tsx index 83f987b44..35be611ba 100644 --- a/samples/create-app-demo/src/home/index.tsx +++ b/samples/create-app-demo/src/home/index.tsx @@ -5,12 +5,12 @@ import { message } from "./message"; export const Demo1 = createDynamicComponent( { name: "demo1", - getModule: () => import("../demo1") + getModule: () => import("../demo1"), }, { ssr: true } ); -const Home = props => { +const Home = (props) => { return (

@@ -30,7 +30,7 @@ export const subapp: ReactSubApp = { Component: Home, wantFeatures: [ staticPropsFeature({ - serverModule: require.resolve("./static-props") - }) - ] + serverModule: require.resolve("./static-props"), + }), + ], }; diff --git a/samples/create-app-demo/src/home/static-props.tsx b/samples/create-app-demo/src/home/static-props.tsx index 71e62c354..8d5f393ea 100644 --- a/samples/create-app-demo/src/home/static-props.tsx +++ b/samples/create-app-demo/src/home/static-props.tsx @@ -2,7 +2,7 @@ const maxDelay = 50; export async function getStaticProps() { const delay = Math.floor(Math.random() * maxDelay); - return new Promise(resolve => { + return new Promise((resolve) => { return setTimeout( () => resolve({ props: { message: "Hello from static props", delay } }), delay diff --git a/samples/create-app-demo/src/server/config.ts b/samples/create-app-demo/src/server/config.ts index 8084a27aa..453b94af8 100644 --- a/samples/create-app-demo/src/server/config.ts +++ b/samples/create-app-demo/src/server/config.ts @@ -7,7 +7,7 @@ const connection: ConnectionConfig = { host: process.env.HOST || "localhost", // The env APP_SERVER_PORT allows Electrode X to control app's listening port during dev // to serve both static assets and app under a unified proxy port - port: parseInt(process.env.APP_SERVER_PORT || process.env.PORT || "3000") + port: parseInt(process.env.APP_SERVER_PORT || process.env.PORT || "3000"), }; // @@ -19,8 +19,8 @@ const plugins: PluginsConfig = { */ "@xarc/app-dev": { priority: -1, - enable: Boolean(process.env.WEBPACK_DEV) - } + enable: Boolean(process.env.WEBPACK_DEV), + }, }; /** @@ -37,5 +37,5 @@ export const config: ElectrodeServerConfig = { // don't start fastify server automatically so app can setup routes deferStart: true, connection, - plugins + plugins, }; diff --git a/samples/create-app-demo/src/server/index.ts b/samples/create-app-demo/src/server/index.ts index ecb80089f..77d818c2f 100644 --- a/samples/create-app-demo/src/server/index.ts +++ b/samples/create-app-demo/src/server/index.ts @@ -10,8 +10,8 @@ import { config } from "./config"; export async function start() { await loadRuntimeSupport({ isomorphicCdnOptions: { - prodOnly: true - } + prodOnly: true, + }, }); const server = await electrodeServer(config); diff --git a/samples/create-app-demo/src/server/routes.ts b/samples/create-app-demo/src/server/routes.ts index 38ef931e7..e13e58c34 100644 --- a/samples/create-app-demo/src/server/routes.ts +++ b/samples/create-app-demo/src/server/routes.ts @@ -12,11 +12,11 @@ export function setupRoutes(server) { subApps: [ { name: home.name, ssr: true }, { name: Demo2.name, ssr: true }, - { name: Demo3.name, ssr: true } + { name: Demo3.name, ssr: true }, ], prodAssetData: { - cdnMap: "config/assets.json" - } + cdnMap: "config/assets.json", + }, }); server.route({ @@ -35,6 +35,6 @@ export function setupRoutes(server) { } catch (error) { reply.send(error.stack); } - } + }, }); } diff --git a/samples/create-app-demo/xrun-tasks.ts b/samples/create-app-demo/xrun-tasks.ts index 52933a1f8..f7e2e91c3 100644 --- a/samples/create-app-demo/xrun-tasks.ts +++ b/samples/create-app-demo/xrun-tasks.ts @@ -10,7 +10,7 @@ xrun.updateEnv( * In dev mode, a proxy server listens at `PORT` and forward requests to * to actual node.js app server and webpack dev server. */ - PORT: 3000 + PORT: 3000, /** * In dev mode, `APP_SERVER_PORT` sets the proxy forward port for the * node.js app server. If it's not defined or `0`, then a randomly available @@ -26,7 +26,7 @@ xrun.updateEnv( }, { // do not override any env flag already set in process.env - override: false + override: false, } ); @@ -34,6 +34,6 @@ loadDevTasks(xrun, { // options to customize features webpackOptions: { // enable CSS module for files other than `.mod.css` - cssModuleSupport: "byModExt" - } + cssModuleSupport: "byModExt", + }, });