chore: lots of minor updates and modernification

dhis2 · May 20, 2019 · 3020a23 · 3020a23
1 parent aad1d57
commit 3020a23
Show file tree

Hide file tree

Showing 16 changed files with 373 additions and 136 deletions.
diff --git a/README.md b/README.md
@@ -1,45 +1,3 @@
 # dhis2-app-platform
 
-TODO
-
--   [x] Working POC
--   [x] Port a simple app (`usage-analytics`) to `app-scripts`/`app-shell`
-    -   [x] WORKING!
--   [/] Support app-specific dependencies
-    -   [ ] Enable pnp for appShell install (again)
--   [ ] Don't use CRA to build
-    -   [ ] Build app component bundles with WebPack (using SplitChunks for shared code)
-    -   [ ] Audit package sizes
--   [ ] Support simple configuration (`d2.config.js` or `.d2rc`)
--   [ ] Support specifying appShell for testing
--   [ ] Support automatic clearing of `.d2/shell` when new version installed (use prepublish script?)
--   [x] Support non-js app includes (images, static files, etc.)
--   [x] Reference React from appShell instead of bundling a second local version
-    -   [ ] ReactDOM too
-    -   [ ] Others?
--   [ ] Support bundle analysis
--   [ ] Name bundles based on application name
--   [ ] Support plugin entrypoint
--   [ ] Pass server URL to application component (or provide server context)
--   [x] Support i18n extract/generate/runtime
-    -   [ ] Add runtime dependencies (`d2-i18n`, `moment`) to `appShell`
-    -   [ ] Set locale in `appShell`
--   [x] Native jest testing support
-    -   [ ] Add `jest-enzyme` to `appShell`
-    -   [ ] Test independent of `appShell`
-    -   [ ] Support tests and mocks in application package
--   [ ] Native cypress testing support
--   [ ] Editor integrations
-    -   [ ] Prettier
-    -   [ ] ESLint?
-    -   [ ] tsconfig?
--   [ ] Enable pre-compiled appShell
--   [ ] Auto-install git hooks
--   [ ] `d2-app-scripts style apply` ?
--   [ ] `d2-app-scripts deploy`, `d2-app-scripts release`, `d2-app-scripts publish` ?
--   [ ] Do we need a `runtime` peer dependency?
--   [ ] Support static files in app builds
--   [ ] Generate app manifest, customize shell with app-provided data (name in headerbar, title)
--   [ ] Support SSR
--   [ ] Support `<Head></Head>` overrides in JSX
--   [ ] `appShell`-level router
+DOCUMENTATION TODO
diff --git a/examples/simple/i18n/en.pot b/examples/simple/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-02-21T18:49:25.400Z\n"
-"PO-Revision-Date: 2019-02-21T18:49:25.400Z\n"
+"POT-Creation-Date: 2019-03-26T13:13:17.855Z\n"
+"PO-Revision-Date: 2019-03-26T13:13:17.855Z\n"
 
 msgid "HELLO WORLD!"
 msgstr ""
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "example-cra",
+    "name": "simple-app",
     "version": "1.0.0",
-    "main": "index.js",
+    "main": "src/App.js",
     "repository": "https://github.com/amcgee/dhis2-app-platform",
     "author": "Austin McGee <[email protected]>",
     "license": "BSD-3-Clause",

diff --git a/examples/simple/src/App.js b/examples/simple/src/App.js
@@ -1,20 +1,21 @@
 import React from 'react'
 import i18n from './locales'
 
+const style = {
+    position: 'absolute',
+    top: 48,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '1rem',
+}
+
 const Component = ({ config }) => (
-    <div
-        style={{
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}
-    >
+    <div style={style}>
         <h1>{i18n.t('HELLO WORLD!')}</h1>
         <h3>DHIS2 URL: {config.url}</h3>
     </div>

diff --git a/examples/usage-analytics/package.json b/examples/usage-analytics/package.json
@@ -2,35 +2,27 @@
     "name": "usage-analytics-app",
     "version": "32.0.1",
     "private": true,
+    "main": "./src/App",
     "scripts": {
         "start": "d2-app-scripts start",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test"
     },
-    "husky": {
-        "hooks": {
-            "commit-msg": "d2-style commit check",
-            "pre-commit": "d2-style js apply"
-        }
-    },
     "dependencies": {
         "@dhis2/d2-i18n": "^1.0.4",
         "@dhis2/ui": "^1.0.0-beta.8",
         "chart.js": "^2.7.3",
         "lodash.debounce": "^4.0.8",
         "prop-types": "^15.6.2",
-        "react": "^16.6.3",
         "react-app-polyfill": "^0.1.3",
         "react-chartjs-2": "^2.7.4",
-        "react-dom": "^16.6.3",
         "react-redux": "^6.0.0",
         "redux": "^4.0.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.3.0"
     },
     "devDependencies": {
         "@dhis2/app-scripts": "0.1.0",
-        "@dhis2/cli-style": "2.0.1",
         "fetch-mock": "^7.3.1",
         "node-fetch": "^2.3.0",
         "redux-mock-store": "^1.5.3"

diff --git a/examples/usage-analytics/src/App.js b/examples/usage-analytics/src/App.js
@@ -1,15 +1,12 @@
 import React from 'react'
-import i18n from '@dhis2/d2-i18n'
 import { Provider } from 'react-redux'
-import HeaderBar from '@dhis2/ui/widgets/HeaderBar'
 import store from './store'
 import UsageAnalytics from './components/UsageAnalytics'
 import './App.css'
 
 function App() {
     return (
         <Provider store={store}>
-            <HeaderBar appName={i18n.t('Usage Analytics')} />
             <UsageAnalytics />
         </Provider>
     )

diff --git a/packages/app-scripts/package.json b/packages/app-scripts/package.json
@@ -11,14 +11,14 @@
         "@babel/preset-env": "^7.3.1",
         "@babel/preset-react": "^7.0.0",
         "@dhis2/app-shell": "0.1.0",
-        "@dhis2/cli-helpers-engine": "^0.11.0",
+        "@dhis2/cli-helpers-engine": "^1.2.0",
         "babel-loader": "^8.0.5",
         "chalk": "^2.4.2",
         "css-loader": "^2.1.0",
         "file-loader": "^3.0.1",
         "fs-extra": "^7.0.1",
         "gaze": "^1.1.3",
-        "i18next-conv": "^8.0.1",
+        "i18next-conv": "^7",
         "i18next-scanner": "^2.9.1",
         "style-loader": "^0.23.1",
         "url-loader": "^1.1.2",

diff --git a/packages/app-scripts/src/commands/build.js b/packages/app-scripts/src/commands/build.js
@@ -16,7 +16,7 @@ const handler = async ({ cwd, shell: shellSource, force }) => {
     console.log(shellSource)
     await shell.bootstrap({ shell: shellSource, force })
 
-    exitOnCatch(
+    await exitOnCatch(
         async () => {
             reporter.info('Generating internationalization strings...')
             await i18n.extract({ input: paths.src, output: paths.i18nStrings })
@@ -54,8 +54,7 @@ const handler = async ({ cwd, shell: shellSource, force }) => {
 
 const command = {
     aliases: 'b',
-    desc:
-        'Build a production app bundle for use with the DHIS2 app-shell in production',
+    desc: 'Build a production app bundle for use with the DHIS2 app-shell',
     handler,
 }
 

diff --git a/packages/app-scripts/src/commands/start.js b/packages/app-scripts/src/commands/start.js
@@ -14,7 +14,7 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
 
     reporter.info('Starting app shell...')
 
-    exitOnCatch(
+    await exitOnCatch(
         async () => {
             await i18n.extract({ input: paths.src, output: paths.i18nStrings })
             await i18n.generate({

diff --git a/packages/app-scripts/src/commands/test.js b/packages/app-scripts/src/commands/test.js
@@ -14,7 +14,7 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
 
     reporter.info('Running tests...')
 
-    exitOnCatch(
+    await exitOnCatch(
         async () => {
             const compilePromise = compile({
                 mode: 'development',

diff --git a/packages/app-scripts/src/lib/i18n/extract.js b/packages/app-scripts/src/lib/i18n/extract.js
@@ -40,18 +40,10 @@ const extract = async ({ input, output }) => {
 
     var targetPath = path.join(output, 'en.pot')
 
-    // var checkExisting = true;
-    // if (!fs.existsSync(output)) {
-    //   (checkExisting = false), fs.mkdirSync(output);
-    //   fs.closeSync(fs.openSync(targetPath, 'w'));
-    // }
-
     if (fs.existsSync(targetPath)) {
         // validate, diff translation keys b/w en.pot vs now
-        const json = await gettextToI18next(
-            'en',
-            fs.readFileSync(targetPath, 'utf8')
-        )
+        const content = fs.readFileSync(targetPath, 'utf8')
+        const json = await gettextToI18next('en', content)
 
         var msgIds = Object.keys(en)
         var newMsgIds = Object.keys(JSON.parse(json))

diff --git a/packages/app-shell/src/App.tsx b/packages/app-shell/src/App.tsx
@@ -1,16 +1,22 @@
-import React from 'react';
+import React from 'react'
+import HeaderBar from '@dhis2/ui/widgets/HeaderBar'
 
- // @ts-ignore
-const D2App = React.lazy(() => import('./current-d2-app/App')); // Automatic bundle splitting!
+// @ts-ignore
+const D2App = React.lazy(() => import('./current-d2-app/App')) // Automatic bundle splitting!
 
-const url = process.env.REACT_APP_DHIS2_BASE_URL;
+const url = process.env.REACT_APP_DHIS2_BASE_URL
 
 const App = () => (
-  <React.Suspense fallback={<div></div>}>
-    <D2App config={{
-      url
-    }} />
-  </React.Suspense>
-);
+    <div>
+        <HeaderBar appName={process.env.REACT_APP_DHIS2_APP_NAME} />
+        <React.Suspense fallback={<div />}>
+            <D2App
+                config={{
+                    url,
+                }}
+            />
+        </React.Suspense>
+    </div>
+)
 
-export default App;
+export default App
diff --git a/packages/app-shell/src/index.tsx b/packages/app-shell/src/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 
 import 'typeface-roboto/index.css'
-import '@dhis2/ui/defaults/reset.css'
-import '@dhis2/ui/defaults/common.css'
+// import '@dhis2/ui/defaults/reset.css'
+// import '@dhis2/ui/defaults/common.css'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()
diff --git a/packages/app-shell/src/react-app-env.d.ts b/packages/app-shell/src/react-app-env.d.ts
@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module '@dhis2/ui/widgets/HeaderBar'
diff --git a/packages/gql-server/package.json b/packages/gql-server/package.json
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		/// <reference types="react-scripts" />

		declare module '@dhis2/ui/widgets/HeaderBar'