fix: support tree-shakable builds and upgrade dependencies (#780)

.github/workflows/dhis2-verify-lib.yml

@@ -83,6 +83,10 @@ jobs:
               with:
                   name: lib-build
 
+            - name: Generate i18n
+              working-directory: ./examples/query-playground
+              run: yarn d2-app-scripts i18n generate
+
             - name: Lint
               run: yarn lint
 

.gitignore

@@ -6,4 +6,5 @@ build
 dist
 yarn-error.log
 coverage
-.vscode
+.vscode
+**/src/locales/*

examples/cra/src/App.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import './App.css'
-import { SwitchableProvider } from './components/SwitchableProvider'
+import { Alerts } from './components/Alerts'
 import { ConfigConsumer } from './components/ConfigConsumer'
 import { IndicatorList } from './components/IndicatorList'
-import { Alerts } from './components/Alerts'
+import { SwitchableProvider } from './components/SwitchableProvider'
 
 const config = {
     baseUrl: process.env.REACT_APP_D2_BASE_URL || 'http://localhost:8080',

examples/cra/src/components/AddButton.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { useDataMutation } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const mutation = {
     resource: 'indicators',

examples/cra/src/components/Alerts.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import { useAlerts } from '@dhis2/app-runtime'
+import React from 'react'
 
 export const Alerts = () => {
     const alerts = useAlerts()

examples/cra/src/components/ConfigConsumer.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import { useConfig } from '@dhis2/app-runtime'
+import React from 'react'
 
 export const ConfigConsumer = () => {
     const config = useConfig()

examples/cra/src/components/DeleteButton.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { useDataMutation } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const mutation = {
     resource: 'indicators',

examples/cra/src/components/Indicator.js

@@ -1,6 +1,6 @@
-import React, { useState, useRef } from 'react'
-import PropTypes from 'prop-types'
 import { useDataMutation } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
 import { DeleteButton } from './DeleteButton'
 
 const mutation = {

examples/cra/src/components/IndicatorList.js

@@ -1,7 +1,7 @@
-import React from 'react'
 import { useAlert, useDataQuery } from '@dhis2/app-runtime'
-import { Indicator } from './Indicator'
+import React from 'react'
 import { AddButton } from './AddButton'
+import { Indicator } from './Indicator'
 
 const query = {
     indicators: {

examples/cra/src/components/SwitchableProvider.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Provider, DataProvider } from '@dhis2/app-runtime'
+import React from 'react'
 
 export const SwitchableProvider = ({ type, config, children }) => {
     if (type === 'data') {

examples/cra/yarn.lock

@@ -1047,20 +1047,20 @@
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "2.5.1"
+  version "2.7.0"
   dependencies:
-    "@dhis2/app-service-alerts" "2.5.1"
-    "@dhis2/app-service-config" "2.5.1"
-    "@dhis2/app-service-data" "2.5.1"
+    "@dhis2/app-service-alerts" "2.7.0"
+    "@dhis2/app-service-config" "2.7.0"
+    "@dhis2/app-service-data" "2.7.0"
 
-"@dhis2/app-service-alerts@2.5.1", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "2.4.0"
+"@dhis2/app-service-alerts@2.7.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "2.7.0"
 
-"@dhis2/app-service-config@2.5.1", "@dhis2/app-service-config@file:../../services/config":
-  version "2.5.1"
+"@dhis2/app-service-config@2.7.0", "@dhis2/app-service-config@file:../../services/config":
+  version "2.7.0"
 
-"@dhis2/app-service-data@2.5.1", "@dhis2/app-service-data@file:../../services/data":
-  version "2.5.1"
+"@dhis2/app-service-data@2.7.0", "@dhis2/app-service-data@file:../../services/data":
+  version "2.7.0"
 
 "@hapi/[email protected]":
   version "2.1.4"

examples/query-playground/src/App.js

@@ -1,6 +1,5 @@
 import { CssVariables } from '@dhis2/ui'
 import React from 'react'
-
 import { QueryRepl } from './QueryRepl'
 
 export default function App() {

examples/query-playground/src/QueryRepl.js

@@ -1,16 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
-
+import React from 'react'
 import { GlobalLoading } from './components/GlobalLoading'
 import { QueryTab } from './components/QueryTab'
+import { ServerDetails } from './components/ServerDetails'
 import { TabControls } from './components/TabControls'
-import { useTabs } from './hooks/useTabs'
 import { useExecuteQuery } from './hooks/useExecuteQuery'
+import { useTabs } from './hooks/useTabs'
 import styles from './QueryRepl.module.css'
-
-/* eslint-disable-next-line import/no-unresolved */
 import './locales/index.js'
-import { ServerDetails } from './components/ServerDetails'
 
 export const QueryRepl = () => {
     const { loading, execute } = useExecuteQuery()

examples/query-playground/src/components/Editor.js

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import AceEditor from 'react-ace'
 
 import 'brace/mode/json'

examples/query-playground/src/components/QueryEditor.js

@@ -1,9 +1,8 @@
+import i18n from '@dhis2/d2-i18n'
 import { Button, Radio } from '@dhis2/ui'
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-
+import React, { useState } from 'react'
 import { Editor } from './Editor'
-import i18n from '@dhis2/d2-i18n'
 import styles from './QueryEditor.module.css'
 
 const defaultQuery = {

examples/query-playground/src/components/QueryResults.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import styles from './QueryResults.module.css'
+import React from 'react'
 import { Editor } from './Editor'
-import i18n from '@dhis2/d2-i18n'
+import styles from './QueryResults.module.css'
 
 export const QueryResults = ({ result }) => {
     return (

examples/query-playground/src/components/QueryTab.js

@@ -1,9 +1,8 @@
 import { PropTypes } from '@dhis2/prop-types'
 import React from 'react'
-import styles from './QueryTab.module.css'
-
 import { QueryEditor } from './QueryEditor'
 import { QueryResults } from './QueryResults'
+import styles from './QueryTab.module.css'
 
 export const QueryTab = ({
     execute,

examples/query-playground/src/components/ServerDetails.js

@@ -1,6 +1,6 @@
-import React from 'react'
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import styles from './ServerDetails.module.css'
 
 export const ServerDetails = () => {

examples/query-playground/src/components/TabControls.js

@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import { PropTypes } from '@dhis2/prop-types'
 import {
     Button,
@@ -10,7 +11,6 @@ import {
     TabBar,
     Tab,
 } from '@dhis2/ui'
-import i18n from '@dhis2/d2-i18n'
 import React, { useState } from 'react'
 import styles from './TabControls.module.css'
 

examples/query-playground/yarn.lock

@@ -1783,20 +1783,20 @@
     moment "^2.24.0"
 
 "@dhis2/app-runtime@*", "@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
-  version "2.5.1"
+  version "2.7.0"
   dependencies:
-    "@dhis2/app-service-alerts" "2.5.1"
-    "@dhis2/app-service-config" "2.5.1"
-    "@dhis2/app-service-data" "2.5.1"
+    "@dhis2/app-service-alerts" "2.7.0"
+    "@dhis2/app-service-config" "2.7.0"
+    "@dhis2/app-service-data" "2.7.0"
 
-"@dhis2/app-service-alerts@2.5.1", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "2.5.1"
+"@dhis2/app-service-alerts@2.7.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "2.7.0"
 
-"@dhis2/app-service-config@2.5.1", "@dhis2/app-service-config@file:../../services/config":
-  version "2.5.1"
+"@dhis2/app-service-config@2.7.0", "@dhis2/app-service-config@file:../../services/config":
+  version "2.7.0"
 
-"@dhis2/app-service-data@2.5.1", "@dhis2/app-service-data@file:../../services/data":
-  version "2.5.1"
+"@dhis2/app-service-data@2.7.0", "@dhis2/app-service-data@file:../../services/data":
+  version "2.7.0"
 
 "@dhis2/[email protected]":
   version "5.2.0"

package.json

@@ -10,7 +10,7 @@
         "services/*"
     ],
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^5.1.0",
+        "@dhis2/cli-app-scripts": "^5.7.1",
         "@dhis2/cli-style": "^7.2.2",
         "@dhis2/cli-utils-docsite": "^2.0.3",
         "@testing-library/jest-dom": "^5.0.2",
@@ -20,6 +20,7 @@
         "@types/node": "^13.1.8",
         "@types/react": "^16.9.18",
         "@types/react-dom": "^16.9.5",
+        "@types/testing-library__dom": "^7.5.0",
         "@typescript-eslint/eslint-plugin": "^4.7.0",
         "@typescript-eslint/parser": "^4.7.0",
         "concurrently": "^5.0.2",

runtime/package.json

@@ -2,9 +2,13 @@
     "name": "@dhis2/app-runtime",
     "description": "A singular runtime dependency for applications on the DHIS2 platform",
     "version": "2.7.0",
-    "main": "build/cjs/lib.js",
-    "module": "build/es/lib.js",
-    "types": "build/types/index.d.ts",
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "types": "./build/types/index.d.ts",
+    "exports": {
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/dhis2/app-runtime.git",

runtime/src/Provider.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { ConfigProvider } from '@dhis2/app-service-config'
-import { DataProvider } from '@dhis2/app-service-data'
 import { AlertsProvider } from '@dhis2/app-service-alerts'
+import { ConfigProvider } from '@dhis2/app-service-config'
 import { Config } from '@dhis2/app-service-config/build/types/types'
+import { DataProvider } from '@dhis2/app-service-data'
+import React from 'react'
 
 type ProviderInput = {
     config: Config

services/alerts/d2.config.js

@@ -2,7 +2,7 @@ const config = {
     type: 'lib',
 
     entryPoints: {
-        lib: './src/index',
+        lib: './src/index.ts',
     },
 }
 

services/alerts/package.json

@@ -1,9 +1,13 @@
 {
     "name": "@dhis2/app-service-alerts",
     "version": "2.7.0",
-    "main": "build/cjs/lib.js",
-    "module": "build/es/lib.js",
-    "types": "build/types/index.d.ts",
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "types": "./build/types/index.d.ts",
+    "exports": {
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/dhis2/app-runtime.git",

services/alerts/src/__tests__/integration.test.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react'
 import { renderHook, act } from '@testing-library/react-hooks'
+import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlerts, useAlert } from '../index'
 
 describe('useAlert and useAlerts used together', () => {

services/alerts/src/__tests__/useAlert.test.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react'
 import { renderHook } from '@testing-library/react-hooks'
+import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlert } from '../index'
 
 describe('useAlert', () => {

services/alerts/src/__tests__/useAlerts.test.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react'
 import { renderHook } from '@testing-library/react-hooks'
+import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlerts } from '../index'
 
 describe('useAlerts', () => {