How to integarte @clairejs into Create-React-App

1. Generate a project using npx create-react-app --template typescript <app-name>

2. Run npm run eject to eject the app. This is due to the fact that @clairejs depends heavily on decorator metadata (reflect-metadata) but create-react-app babel is currently not supporting it.

3. Replace "babel" config in package.json file by this

"babel": {
    "plugins": [
        "babel-plugin-transform-typescript-metadata",
        [
            "@babel/plugin-transform-typescript",
            {
                "allowDeclareFields": true
            }
        ],
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ],
        [
            "@babel/plugin-proposal-private-methods",
            {
                "loose": true
            }
        ],
        [
            "@babel/plugin-proposal-private-property-in-object",
            {
                "loose": true
            }
        ]
    ],
    "presets": [
        "@babel/preset-typescript",
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

4. Install dev packages: npm i @clairejs/react @clairejs/core babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

5. Edit run script to reflect the current environment: "start": "REACT_APP_ENV=<env> node scripts/start.js",

6. Apply @clairejs architecture, run npm install & npm start

• For react 17:

import ReactDOM from "react-dom";
ReactDOM.render(<ClaireApp routes={routes} bootstrap={bootstrapFunction} stores={[store1, store2]]} />, document.getElementById("root"));

• For react 18:

import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<ClaireApp routes={routes} bootstrap={bootstrapFunction} stores={[store1, store2]} />);

Change Log

3.3.7

• update claire core & claire client
• add noCache option in getMany action
• fix unhandled promises in getCrudActions
• fix Tlt return raw text without style (so usable for React Native)
• fix i18n getText & Tlt expression
• update Tlt exp recognition Regex

3.3.1

• add useAPI
• remove webpack build, export as esm module

3.2.23

• update core, client
• add updateRecords action

3.2.20

• update fetchByIds action add projection

3.2.19

• remove getAPI, add importDelay

3.2.18

• update core, client, remove not necessary hooks

3.2.17

• update claire client, fix actions to handle undefined value from api

3.2.16

• fix claire client

3.2.15

• update core & client packages

3.2.13

• update core & client packages
• add oldDataFilter to getCrudActions createMany to filter out old data in case of data override in createMany

3.2.12

• update core & client packages

3.2.11

• improve CrudActions updateMany to returning data if update data contains mimeProps or hasMany

3.2.10

• improve translation script to read and ignore Tlt exp

3.2.8

• add useTranslation hook
• add getText to convert text from Tlt node (synchronously)
• add tlt-extract-react script
• add className and exp properties to Tlt component
• add style property to Tlt component, fix useLanguage hook
• fix useResolve for abstract class
• adding id property for Tlt component
• upgrade new translation mechanism using Tlt component

3.1.1

• use deepMerge from @clairejs/core
• move routing & local storage to @clairejs/react-web package

3.0.34

• handle undefined error
• fix usePaging does not allow to go back
• view middleware and redirect will replace route
• fix usePaging reset other queries in url
• fix RouteAwareComponent double rendering
• fix inherit middleware in nested routes

3.0.27

• ModelStore accept Identifiable as generic type

3.0.26

• fix middleware from/to
• fix useDebounce
• fix issue with late component registration in useStore

3.0.23

• add some utisl hooks
• fix StoreAction types

3.0.22

• react & react dom >= 17.0.2

3.0.20

• update claire core
• unique reduce in crud getByIds store action

3.0.18

• fix use Store
• fix export, fix test
• fix api, change ApiFunction to StoreAction

3.0.11

• upgrade to react 18

3.0.9

• add type support to useStore & useDispatch

3.0.7

• add default store selector
• add error handling

3.0.3

• exclude react dom & react in build
• emit typescript .d.ts

3.0.0

• using claire core & claire client 3.x
• implement store, api, translation utils

1.0.0

• add store hooks