"
46 | ],
47 | "prettier": {
48 | "semi": false,
49 | "singleQuote": false,
50 | "arrowParens": "always",
51 | "trailingComma": "all"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/examples/cra/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/examples/cra/public/favicon.ico
--------------------------------------------------------------------------------
/examples/cra/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/examples/cra/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/examples/cra/public/logo192.png
--------------------------------------------------------------------------------
/examples/cra/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/examples/cra/public/logo512.png
--------------------------------------------------------------------------------
/examples/cra/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/examples/cra/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/examples/cra/src/App.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | }
6 |
7 | .App {
8 | text-align: center;
9 | }
10 | .App code {
11 | background: #fff3;
12 | padding: 4px 8px;
13 | border-radius: 4px;
14 | }
15 | .App p {
16 | margin: 0.4rem;
17 | }
18 |
19 | .App-logo {
20 | height: 40vmin;
21 | pointer-events: none;
22 | }
23 |
24 | @media (prefers-reduced-motion: no-preference) {
25 | .App-logo {
26 | animation: App-logo-spin infinite 20s linear;
27 | }
28 | }
29 |
30 | .App-header {
31 | background-color: #282c34;
32 | min-height: 100vh;
33 | display: flex;
34 | flex-direction: column;
35 | align-items: center;
36 | justify-content: center;
37 | font-size: calc(10px + 2vmin);
38 | color: white;
39 | }
40 |
41 | .App-link {
42 | color: #61dafb;
43 | }
44 |
45 | @keyframes App-logo-spin {
46 | from {
47 | transform: rotate(0deg);
48 | }
49 | to {
50 | transform: rotate(360deg);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/examples/cra/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react"
2 | import { configure } from "mobx"
3 | import { MyRootCont } from "./containers/_container.hooks"
4 | import { getMainPizzaAppContainer } from "./containers/_root.store"
5 | import { Main } from "./Main"
6 | import "./App.css"
7 |
8 | // don't allow state modifications outside actions
9 | configure({ enforceActions: "always" })
10 |
11 | interface AppProps {}
12 |
13 | function App({}: AppProps) {
14 | const store = useMemo(() => getMainPizzaAppContainer(), [])
15 | return (
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 |
24 | export default App
25 |
--------------------------------------------------------------------------------
/examples/cra/src/DomReady.todo-example.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react"
2 |
3 | // async flow
4 | class domController {
5 | constructor() {
6 | this._domReady = new Promise((resolve, reject) => {
7 | this.cb = resolve
8 | })
9 | }
10 |
11 | markDomAsDone() {
12 | this.cb()
13 | }
14 |
15 | domIsReady() {
16 | return this._domReady
17 | }
18 | }
19 |
20 | export async function provideProductDriverContainer(domController, a) {
21 | await domController.domIsReady()
22 |
23 | const pd = new PD()
24 | await pd.initRenderer()
25 |
26 | await wait(200)
27 | const b2 = new B2(auth.auth, a.a1)
28 |
29 | return {
30 | b1,
31 | b2,
32 | }
33 | }
34 |
35 | export const Main = () => {
36 | const { domController } = useStufContainer()
37 | useEffect(() => {
38 | setTimeout(() => {
39 | domController.markDomAsDone()
40 | }, 500)
41 | }, [])
42 | return (
43 |
44 | Main Component:
45 |
9 | new Err Controls:
10 | {/*
11 |
12 | */}
13 |
14 |
15 | )
16 | }
17 |
18 | const Simple = () => {
19 | const [a, err] = useContainer().aCont
20 | if (!a) return <>A is loading
21 | return Sync Err: {a.a1.getName()}
22 | }
23 |
24 | const SimpleSyncErr = () => {
25 | const [a, err] = useContainer().errSync
26 | if (!err) {
27 | return null
28 | }
29 |
30 | return Sync Err1: {err.message}
31 | }
32 |
33 | const SimpleAsyncErr = () => {
34 | const [a, err] = useContainer().errAsync
35 | if (!err) {
36 | return null
37 | }
38 |
39 | return Async Sync Err2: {err.message}
40 | }
41 |
42 | const NestedErr = () => {
43 | const [a, err] = useContainer().errNested
44 | console.log("~~~ err", err)
45 | if (!a) {
46 | return null
47 | }
48 |
49 | console.log(a)
50 |
51 | return Async Nested Sync Err2:
52 | }
53 |
--------------------------------------------------------------------------------
/examples/cra/src/components/MainLayoutControl.module.css:
--------------------------------------------------------------------------------
1 | .controls {
2 | display: grid;
3 | grid-template-columns: 3fr 1fr;
4 | grid-template-rows: 3fr 1fr;
5 | grid-column-gap: 0px;
6 | grid-row-gap: 0px;
7 | }
8 |
9 | .main {
10 | grid-area: 1 / 1 / 2 / 2;
11 | }
12 | .aside {
13 | grid-area: 1 / 2 / 2 / 3;
14 | }
15 | .bottom {
16 | grid-area: 2 / 1 / 3 / 3;
17 | }
18 |
--------------------------------------------------------------------------------
/examples/cra/src/components/MainLayoutControl.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import s from "./MainLayoutControl.module.css"
3 | import { PizzaPlace } from "./PizzaPlace"
4 | import { Controls } from "./Controls"
5 |
6 | export const MainLayoutControl = () => {
7 | return (
8 | <>
9 |
10 |
13 |
14 |
15 |
16 |
17 |
Pizza Place1
18 |
19 |
16 |
Pizza Place: {pizzaPlace.name}
17 | Open?: {pizzaPlace.isOpen ? "true" : "false"}
18 | Dining Tables: {diningTables.tables.length}
19 |
20 |
21 |
22 |
23 | )
24 | })
25 |
26 | export const KitchenData = observer(() => {
27 | const [kitchenCont] = useContainer().kitchen
28 |
29 | if (!kitchenCont) return <>Kitchen is loading
30 |
31 | const { kitchen, orderManager } = kitchenCont
32 | return (
33 | <>
34 | Kitchen data: ({kitchen.kitchenName})
35 |
36 |
37 |
38 |
Orders:
39 |
40 | {orderManager.orders.map((order, idx) => {
41 | return (
42 | -
43 | table: {order.table.name} | pizzastate: {order.pizza.state}
44 |
45 | {order.pizza.ingredients.map((ingredient, idx) => (
46 | - {ingredient.name}
47 | ))}
48 |
49 |
50 | )
51 | })}
52 |
53 |
54 |
55 |
Ingredients:
56 |
57 |
58 |
70 | {ingredients.ingredientsStats.map(([name, count], idx) => (
71 | -
72 | test {name} - {count as string}
73 |
74 | ))}
75 |
76 |
77 | )
78 | })
79 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/_AppRoot.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode, useMemo } from "react"
2 | import { MyRootCont } from "../containers/_container.hooks"
3 | import { getMainPizzaAppContainer } from "../containers/_root.store"
4 |
5 | export function PizzaAppWrapper({ children }: { children: ReactNode }) {
6 | const store = useMemo(() => getMainPizzaAppContainer(), [])
7 |
8 | return {children}
9 | }
10 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/_container.hooks.ts:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react"
2 | import { getContainerSetHooks } from "iti-react"
3 | import { PizzaAppContainer } from "./_root.store"
4 |
5 | export const MyRootCont = React.createContext({})
6 |
7 | let mega = getContainerSetHooks(MyRootCont)
8 | export const useContainerSet = mega.useContainerSet
9 | export const useContainer = mega.useContainer
10 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/_root.store.ts:
--------------------------------------------------------------------------------
1 | import { createContainer } from "iti"
2 |
3 | import { provideAContainer } from "./container.a"
4 | import { provideAuthContainer } from "./container.auth"
5 | import { provideBContainer } from "./container.b"
6 | import { provideKitchenManipulatorContainer } from "./container.kitchein-manipulator"
7 | import { providePizzaPlaceContainer } from "./container.pizza-place"
8 | import { provideKitchenContainer } from "./container.kitchen"
9 |
10 | import { provideFatLib1 } from "./container.fat-lib1"
11 | import { provideFatLib2 } from "./container.fat-lib2"
12 |
13 | export type PizzaAppCoreContainer = ReturnType
14 | export function pizzaAppCore() {
15 | return createContainer()
16 | .add(() => ({
17 | auth: async () => provideAuthContainer(),
18 | }))
19 | .add((c) => ({
20 | aCont: async () => provideAContainer(await c.auth),
21 | }))
22 | .add((ctx) => ({
23 | bCont: async () => provideBContainer(await ctx.auth, await ctx.aCont),
24 | }))
25 | .add((c) => ({
26 | // fat libs
27 | fatlib1: async () => provideFatLib1(),
28 | fatlib2: async () => provideFatLib2(),
29 | }))
30 | .add((ctx, node) => ({
31 | // pizza stuff
32 | pizzaContainer: async () => providePizzaPlaceContainer(await ctx.fatlib2),
33 | kitchen: async () => provideKitchenContainer(),
34 | }))
35 | .add((ctx) => ({
36 | errSync: () => {
37 | throw new Error("errSync")
38 | },
39 | errAsync: async () => {
40 | throw new Error("errAsync")
41 | },
42 | errNested: async () => ({
43 | nestedSyncErr: () => {
44 | throw new Error("errSync")
45 | },
46 | nestedAsyncErr: async () => {
47 | throw new Error("nestedAsyncErr")
48 | },
49 | }),
50 | }))
51 | }
52 |
53 | export type PizzaAppContainer = ReturnType
54 | export function getMainPizzaAppContainer() {
55 | return pizzaAppCore().add((ctx, node) => ({
56 | kitchenManipulator: async () => provideKitchenManipulatorContainer(node),
57 | }))
58 | }
59 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/_utils.ts:
--------------------------------------------------------------------------------
1 | export const wait = (w: number) => new Promise((r) => setTimeout(r, w))
2 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.a.ts:
--------------------------------------------------------------------------------
1 | import type { AuthContainer } from "./container.auth"
2 | import { A1, A2, A3 } from "../stores/store.a"
3 |
4 | export interface A_Container {
5 | a1: A1
6 | a2: A2
7 | a3: A3
8 | }
9 |
10 | export async function provideAContainer(
11 | auth: AuthContainer,
12 | ): Promise {
13 | const a1 = new A1(auth.auth)
14 | const a2 = new A2(a1, auth.auth)
15 | const a3 = new A3(a1, a2)
16 |
17 | return {
18 | a1,
19 | a2,
20 | a3,
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.auth.ts:
--------------------------------------------------------------------------------
1 | import { Authorization } from "../stores/store.authorization"
2 | import { Auth } from "../stores/store.auth"
3 | import { wait } from "./_utils"
4 |
5 | export interface AuthContainer {
6 | auth: Auth
7 | authorization: Authorization
8 | }
9 |
10 | export async function provideAuthContainer(): Promise {
11 | const auth = new Auth()
12 | await wait(50)
13 | await auth.getToken()
14 | let x = await auth.getUserType()
15 | return {
16 | auth: auth,
17 | authorization: new Authorization(x),
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.b.ts:
--------------------------------------------------------------------------------
1 | import type { A_Container } from "./container.a"
2 | import type { AuthContainer } from "./container.auth"
3 | import { B1, B2 } from "../stores/store.b"
4 | import { wait } from "./_utils"
5 |
6 | export interface B_Container {
7 | b1: B1
8 | b2: B2
9 | }
10 |
11 | export async function provideBContainer(
12 | auth: AuthContainer,
13 | a: A_Container,
14 | ): Promise {
15 | const b1 = new B1(auth.auth, a.a2)
16 |
17 | await wait(70)
18 | const b2 = new B2(auth.auth, a.a1)
19 |
20 | return {
21 | b1,
22 | b2,
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.config.ts:
--------------------------------------------------------------------------------
1 | import { DayType, getDayType } from "../services/url-param"
2 | import { wait } from "./_utils"
3 |
4 | export interface B_Container {
5 | dayType: DayType
6 | }
7 |
8 | export async function provideConfigContainer(): Promise {
9 | const b1 = getDayType()
10 | await wait(90)
11 |
12 | return {
13 | dayType: b1,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.fat-lib1.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Fat Lib 1 shows an example how we can use async modules from react
3 | */
4 | export async function provideFatLib1() {
5 | console.log("~~~ provider for fat lib initiated 0")
6 | let x = await import("../fat-libs/fat-lib1")
7 | console.log("~~~ provider for fat lib initiated 1")
8 | console.log(x)
9 | let s = x.fatLib300kb()
10 |
11 | return {
12 | pizzaPlace: 12,
13 | fatLibData: s,
14 |
15 | getFatLibData: async function () {
16 | let x = await import("../fat-libs/fat-lib1")
17 | console.log("~~~ provider for fat lib initiated 1")
18 | console.log(x)
19 | x.fatLib300kb()
20 | },
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.fat-lib2.ts:
--------------------------------------------------------------------------------
1 | import type { FatLib2_3MB } from "../fat-libs/fat-lib2"
2 | import type { GetContainerFormat } from "iti"
3 |
4 | let x: FatLib2_3MB
5 | /**
6 | * Fat Lib 1 shows an example how we can use async modules from react
7 | */
8 | export async function provideFatLib2() {
9 | console.log("~~~ provider for fat lib 2 initiated 0")
10 | return {
11 | getFatLib2Data: async function () {
12 | let { FatLib2_3MB } = await import("../fat-libs/fat-lib2")
13 |
14 | console.log("~~~ provider for fat lib 2 initiated 1")
15 | console.log(FatLib2_3MB)
16 |
17 | return new FatLib2_3MB()
18 | },
19 | }
20 | }
21 |
22 | // export interface FatLib2Container {
23 | // getFatLib2Data: () => Promise
24 | // }
25 |
26 | export type FatLib2Container = GetContainerFormat
27 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.kitchein-manipulator.ts:
--------------------------------------------------------------------------------
1 | import { KitchenSizeUIController } from "../stores/_controllers/controller.kitchen"
2 | import { provideUpgradedKitchenContainer } from "./container.kitchen"
3 | import type { PizzaAppCoreContainer } from "./_root.store"
4 |
5 | export interface KitchenManipulator_Container {
6 | kitchenSizeController: KitchenSizeUIController
7 | }
8 |
9 | export interface KitchenUpgrader {
10 | upgradeKitchenConatiner: () => Promise
11 | }
12 |
13 | export async function provideKitchenManipulatorContainer(
14 | node: PizzaAppCoreContainer,
15 | ): Promise {
16 | let ksc = new KitchenSizeUIController({
17 | onKitchenResize: async () => {
18 | const currentKitchen = await node.items.kitchen
19 | return await node.upsert({
20 | kitchen: () => provideUpgradedKitchenContainer(currentKitchen),
21 | })
22 | },
23 | })
24 |
25 | return {
26 | kitchenSizeController: ksc,
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.kitchen.ts:
--------------------------------------------------------------------------------
1 | import { IngredientsService } from "../services/ingredients-manager"
2 | import type { Ingredients } from "../stores/store.ingrediets"
3 | import { Kitchen, OrderManager } from "../stores/store.kitchen"
4 | import { Oven } from "../stores/store.oven"
5 |
6 | export interface Kitchen_Container {
7 | oven: Oven
8 | ingredients: Ingredients
9 | orderManager: OrderManager
10 | kitchen: Kitchen
11 | }
12 |
13 | export interface KitchenUpgrader {
14 | upgradeKitchenConatiner: () => Promise
15 | }
16 |
17 | export async function provideKitchenContainer(): Promise {
18 | let oven = new Oven()
19 | let ingredients = await IngredientsService.buySomeIngredients()
20 |
21 | let kitchen = new Kitchen(oven, ingredients)
22 | let orders = new OrderManager(kitchen)
23 |
24 | return {
25 | oven: oven,
26 | orderManager: orders,
27 | ingredients: ingredients,
28 | kitchen: kitchen,
29 | }
30 | }
31 |
32 | export async function provideUpgradedKitchenContainer(
33 | prevContainer: Kitchen_Container,
34 | ): Promise {
35 | let biggerOven = new Oven(8)
36 |
37 | // This is one way of migrating data
38 | let kitchen = new Kitchen(biggerOven, prevContainer.ingredients)
39 | let orderManager = new OrderManager(kitchen)
40 | orderManager.orders = prevContainer.orderManager.orders
41 |
42 | return {
43 | oven: biggerOven,
44 | orderManager: orderManager,
45 | ingredients: prevContainer.ingredients,
46 | kitchen: kitchen,
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/container.pizza-place.ts:
--------------------------------------------------------------------------------
1 | import { PizzaPlace, DiningTables } from "../stores/store.pizza-place"
2 | import type { FatLib2Container } from "./container.fat-lib2"
3 |
4 | export interface PizzaPlace_Container {
5 | pizzaPlace: PizzaPlace
6 | diningTables: DiningTables
7 | }
8 |
9 | export async function providePizzaPlaceContainer(
10 | fatLib2Container: FatLib2Container,
11 | ): Promise {
12 | const a1 = new PizzaPlace(fatLib2Container.getFatLib2Data)
13 | const a2 = new DiningTables()
14 |
15 | return {
16 | pizzaPlace: a1,
17 | diningTables: a2,
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/examples/cra/src/containers/my-jest.ts:
--------------------------------------------------------------------------------
1 | export function itAsyncDone(
2 | name: string,
3 | cb: (done: jest.DoneCallback) => Promise,
4 | timeout?: number,
5 | ) {
6 | it(
7 | name,
8 | (done) => {
9 | let doneCalled = false
10 | const wrappedDone: jest.DoneCallback = (...args) => {
11 | if (doneCalled) {
12 | return
13 | }
14 |
15 | doneCalled = true
16 | done(...args)
17 | }
18 |
19 | wrappedDone.fail = (err) => {
20 | if (doneCalled) {
21 | return
22 | }
23 |
24 | doneCalled = true
25 |
26 | done.fail(err)
27 | }
28 |
29 | cb(wrappedDone).catch(wrappedDone)
30 | },
31 | timeout,
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/examples/cra/src/fat-libs/fat-lib1.ts:
--------------------------------------------------------------------------------
1 | export function fatLib300kb() {
2 | console.log("getting 300kb lib")
3 | return "300KB fatlib string"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/cra/src/fat-libs/fat-lib2.ts:
--------------------------------------------------------------------------------
1 | export class FatLib2_3MB {
2 | public getData() {
3 | console.log("getting 3MB lib")
4 | return "3 MB fatlib string"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/examples/cra/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/examples/cra/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { createRoot } from "react-dom/client"
3 | import "./index.css"
4 | import App from "./App"
5 | import reportWebVitals from "./reportWebVitals"
6 |
7 | const container = document.getElementById("root")
8 | const root = createRoot(container!) // createRoot(container!) if you use TypeScript
9 | root.render(
10 |
11 |
12 | ,
13 | )
14 |
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals()
19 |
--------------------------------------------------------------------------------
/examples/cra/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/examples/cra/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/examples/cra/src/services/ingredients-manager.ts:
--------------------------------------------------------------------------------
1 | import { Ingredients } from "../stores/store.ingrediets"
2 | import _sampleSize from "lodash/sampleSize"
3 | import _sample from "lodash/sample"
4 |
5 | const INGREDIENTS = [
6 | "tomatoes",
7 | "olives",
8 | "salami",
9 | "cheese",
10 | "mushrooms",
11 | "bell pepper",
12 | "mozzarella",
13 | ] as const
14 |
15 | /**
16 | * Fetches Ingredients from the supermarket
17 | */
18 | export class IngredientsService {
19 | public static async buyManyIngredients(): Promise {
20 | return this.buyIngredients(150)
21 | }
22 |
23 | public static async buySomeIngredients(): Promise {
24 | return this.buyIngredients(30)
25 | }
26 |
27 | private static buyIngredients(n = 10): Ingredients {
28 | let x = new Ingredients()
29 |
30 | for (let i = n; i > 0; i--) {
31 | let z = _sample(INGREDIENTS)
32 | if (z != null) {
33 | x.addNewIngredient(z)
34 | }
35 | }
36 | return x
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/examples/cra/src/services/url-param.ts:
--------------------------------------------------------------------------------
1 | export type DayType = "normal" | "friday" | "weekend"
2 |
3 | export function getDayType(): DayType {
4 | const uri = new URL(window.location.href)
5 |
6 | if (uri.searchParams.has("dayType")) {
7 | const mode = uri.searchParams.get("dayType")
8 |
9 | if (mode === "friday") {
10 | return "friday"
11 | }
12 |
13 | if (mode === "weekend") {
14 | return "weekend"
15 | }
16 | }
17 |
18 | return "normal"
19 | }
20 |
21 | export type AuthType = "unauthenticated" | "manager" | "admin"
22 |
23 | export function getAuthType(): AuthType {
24 | const uri = new URL(window.location.href)
25 |
26 | if (uri.searchParams.has("authType")) {
27 | const mode = uri.searchParams.get("authType")
28 |
29 | if (mode === "manager") {
30 | return "manager"
31 | }
32 |
33 | if (mode === "admin") {
34 | return "admin"
35 | }
36 | }
37 |
38 | return "unauthenticated"
39 | }
40 | export function setAuthType(at: AuthType) {
41 | const url = new URL(window.location.href)
42 | url.searchParams.set("authType", at)
43 | console.log("changing user and url to", at)
44 | window.history.pushState({ authType: at }, at, url)
45 | }
46 |
--------------------------------------------------------------------------------
/examples/cra/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/_controllers/controller.kitchen.ts:
--------------------------------------------------------------------------------
1 | export class KitchenSizeUIController {
2 | constructor(
3 | private cbs: {
4 | onKitchenResize: () => Promise
5 | },
6 | ) {}
7 |
8 | public async increaseKitchenSize() {
9 | console.log("kitchen resize")
10 | this.cbs.onKitchenResize()
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.a.ts:
--------------------------------------------------------------------------------
1 | import type { Auth } from "./store.auth"
2 |
3 | export class A1 {
4 | constructor(private auth: Auth) {}
5 | public getName() {
6 | return "Jon Snow"
7 | }
8 | }
9 | export class A2 {
10 | constructor(private a1: A1, private auth: Auth) {}
11 | }
12 | export class A3 {
13 | constructor(private a1: A1, private a2: A2) {}
14 | }
15 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.auth.ts:
--------------------------------------------------------------------------------
1 | import { getAuthType, setAuthType, AuthType } from "../services/url-param"
2 |
3 | const wait = (w: number) => new Promise((r) => setTimeout(r, w))
4 |
5 | export class Auth {
6 | public async getToken(): Promise {
7 | await wait(200)
8 | return "token123"
9 | }
10 |
11 | public async getUser(): Promise {
12 | await wait(200)
13 | return { name: "lol" }
14 | }
15 |
16 | public async getUserType() {
17 | await wait(500)
18 | const t = getAuthType()
19 | return t
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.authorization.ts:
--------------------------------------------------------------------------------
1 | import { makeObservable, observable, computed, action, autorun } from "mobx"
2 | import { getAuthType, setAuthType, AuthType } from "../services/url-param"
3 |
4 | const wait = (w: number) => new Promise((r) => setTimeout(r, w))
5 |
6 | const RightsDB = {
7 | unauthenticated: {
8 | orderPizza: true,
9 | addTables: false,
10 | upgradeKitchen: false,
11 | },
12 | manager: {
13 | orderPizza: true,
14 | addTables: true,
15 | upgradeKitchen: false,
16 | },
17 | admin: {
18 | orderPizza: true,
19 | addTables: true,
20 | upgradeKitchen: true,
21 | },
22 | } as const
23 |
24 | function rightsLookup(rights: T) {
25 | return rights
26 | }
27 |
28 | export class Authorization {
29 | constructor(private _userType: AuthType) {
30 | makeObservable(this, {
31 | // @ts-expect-error
32 | _userType: observable,
33 | userType: computed,
34 | changeUser: action,
35 | })
36 | }
37 |
38 | get userType() {
39 | return this._userType
40 | }
41 |
42 | /**
43 | * this API might look weird but this helps typescript
44 | * k.getAvailableActions()["admin"]
45 | */
46 | public getAvailableActions() {
47 | return rightsLookup(RightsDB)
48 | }
49 |
50 | public async getToken(): Promise {
51 | await wait(200)
52 | return "token123"
53 | }
54 |
55 | public async getUser(): Promise {
56 | await wait(200)
57 | return { name: "lol" }
58 | }
59 |
60 | public async getUserType() {
61 | await wait(500)
62 | const t = getAuthType
63 | return t
64 | }
65 |
66 | public async changeUser(at: AuthType) {
67 | await wait(400)
68 | this._userType = at
69 | setAuthType(at)
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.b.ts:
--------------------------------------------------------------------------------
1 | import type { A1, A2 } from "./store.a"
2 | import type { Auth } from "./store.auth"
3 |
4 | export class B1 {
5 | constructor(private auth: Auth, private a2: A2) {
6 | // 1. Subscribe to event emitter
7 | // 2. Pub update
8 | }
9 | }
10 | export class B2 {
11 | constructor(private auth: Auth, private a1: A1) {}
12 | }
13 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.ingrediets.ts:
--------------------------------------------------------------------------------
1 | import {
2 | makeAutoObservable,
3 | makeObservable,
4 | action,
5 | computed,
6 | observable,
7 | } from "mobx"
8 | import _sample from "lodash/sample"
9 | import _pullAt from "lodash/pullAt"
10 | import _countBy from "lodash/countBy"
11 |
12 | export class Ingredients {
13 | public ingredients: Ingredient[] = []
14 |
15 | constructor() {
16 | makeObservable(this, {
17 | ingredients: observable,
18 | addNewIngredient: action,
19 | getRandomPizzaIngredients: action,
20 | ingredientsStats: computed,
21 | })
22 | }
23 |
24 | public addNewIngredient(n: string) {
25 | this.ingredients.push(new Ingredient(n))
26 | }
27 |
28 | public getRandomPizzaIngredients() {
29 | let pi: Ingredient[] = []
30 |
31 | let k = 4
32 | while (k > 0) {
33 | const i = Math.floor(Math.random() * this.ingredients.length)
34 | pi.push(this.ingredients[i])
35 | _pullAt(this.ingredients, i)
36 | k--
37 | }
38 | return pi
39 | }
40 |
41 | public get ingredientsStats() {
42 | const stats = _countBy(this.ingredients, (ing) => ing.name)
43 | return Object.entries(stats)
44 | }
45 | }
46 |
47 | export class Ingredient {
48 | constructor(public name: string) {
49 | makeAutoObservable(this)
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.kitchen.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable } from "mobx"
2 | import type { Ingredients } from "./store.ingrediets"
3 | import type { Oven } from "./store.oven"
4 | import { Pizza } from "./store.pizza"
5 | import type { Table } from "./store.pizza-place"
6 | import debug from "debug"
7 | const log = debug("oven")
8 |
9 | export class Kitchen {
10 | public kitchenName: string
11 |
12 | constructor(private oven: Oven, private ingredients: Ingredients) {
13 | this.kitchenName = "Random Name " + Math.round(Math.random() * 100)
14 | log("new kitchen: " + this.kitchenName)
15 |
16 | makeAutoObservable(this)
17 | }
18 |
19 | public getRandomPizzaIngredients() {
20 | return this.ingredients.getRandomPizzaIngredients()
21 | }
22 |
23 | public async bakePizza(p: Pizza) {
24 | return this.oven.bakePizza(p)
25 | }
26 | }
27 |
28 | export class OrderManager {
29 | public orders: Order[] = []
30 |
31 | constructor(private kitchen: Kitchen) {
32 | makeAutoObservable(this)
33 | }
34 |
35 | public async orderPizza(table: Table) {
36 | let i = this.kitchen.getRandomPizzaIngredients()
37 | let p = new Pizza(i)
38 |
39 | this.orders.push(new Order(p, table))
40 |
41 | this.kitchen.bakePizza(p)
42 | }
43 | }
44 |
45 | class Order {
46 | constructor(public pizza: Pizza, public table: Table) {}
47 | }
48 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.oven.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable, computed } from "mobx"
2 | import type { Pizza } from "./store.pizza"
3 | import debug from "debug"
4 | const log = debug("oven")
5 |
6 | const BAKING_TIME_MS = 400
7 | const BAKING_TEMPERATURE = 260
8 |
9 | export class Oven {
10 | public currentTemperature = 20
11 | public pizInside: Pizza[] = []
12 |
13 | constructor(private _pizzaCapacity = 4) {
14 | log("new Oven. capacity:", this._pizzaCapacity)
15 | makeAutoObservable(this)
16 | }
17 | public get pizzaCapacity() {
18 | return this._pizzaCapacity
19 | }
20 |
21 | public async preheatOven() {
22 | setTimeout(() => {
23 | this.updateTemperature(BAKING_TEMPERATURE)
24 | }, 200)
25 | }
26 |
27 | public async bakePizza(pizza: Pizza) {
28 | if (this.currentTemperature < BAKING_TEMPERATURE) {
29 | await this.preheatOven()
30 | }
31 |
32 | if (this.pizzasInOven() < this._pizzaCapacity) {
33 | this.addPizzaToOven(pizza)
34 | setTimeout(() => {
35 | pizza.updatePizzaState("baked")
36 | }, BAKING_TIME_MS)
37 | }
38 | }
39 |
40 | private updateTemperature(nc: number) {
41 | this.currentTemperature = nc
42 | }
43 |
44 | private addPizzaToOven(p: Pizza) {
45 | this.pizInside.push(p)
46 | }
47 |
48 | @computed
49 | public pizzasInOven() {
50 | return this.pizInside.length
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.pizza-place.ts:
--------------------------------------------------------------------------------
1 | import { makeObservable, makeAutoObservable, observable, action } from "mobx"
2 | import type { FatLib2_3MB } from "../fat-libs/fat-lib2"
3 |
4 | export class PizzaPlace {
5 | public isOpen = false
6 | public name = "Rocket Pizza"
7 |
8 | constructor(private fatlib: () => Promise) {
9 | console.log("new pizza place")
10 | // makeAutoObservable(this)
11 | makeObservable(this, {
12 | isOpen: observable,
13 | openPizzaPlace: action,
14 | closePizzaPlace: action,
15 | })
16 | }
17 |
18 | public openPizzaPlace() {
19 | this.isOpen = true
20 | }
21 |
22 | public closePizzaPlace() {
23 | this.isOpen = false
24 | }
25 |
26 | public async getFatLibImage() {
27 | const fatLib = await this.fatlib()
28 | return fatLib.getData()
29 | }
30 | }
31 |
32 | export class DiningTables {
33 | public tables: Table[] = []
34 |
35 | constructor() {
36 | makeAutoObservable(this)
37 | }
38 |
39 | public addNewTable() {
40 | console.log("adding new table")
41 | const name = (this.tables.length + 1).toString()
42 | this.tables.push(new Table(name))
43 | }
44 | }
45 |
46 | export class Table {
47 | isEmpty = true
48 | constructor(public name: string) {
49 | makeAutoObservable(this)
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/examples/cra/src/stores/store.pizza.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable } from "mobx"
2 | import type { Ingredient } from "./store.ingrediets"
3 |
4 | type PizzaState = "raw" | "hasIngredients" | "baked"
5 |
6 | export class Pizza {
7 | public state: PizzaState = "raw"
8 |
9 | constructor(public ingredients: Ingredient[]) {
10 | console.log("new pizza with ingredients created")
11 | makeAutoObservable(this)
12 | }
13 |
14 | public updatePizzaState(ns: PizzaState) {
15 | this.state = ns
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/examples/cra/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2020",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "noImplicitAny": false,
10 | "experimentalDecorators": true,
11 | "allowJs": true,
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "allowSyntheticDefaultImports": true,
15 | "strict": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "module": "esnext",
19 | "moduleResolution": "node",
20 | "resolveJsonModule": true,
21 | "isolatedModules": true,
22 | "noEmit": true,
23 | "jsx": "react-jsx"
24 | },
25 | "include": [
26 | "src"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node-cjs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn-error.log
3 | dist
--------------------------------------------------------------------------------
/examples/node-cjs/node-1.js:
--------------------------------------------------------------------------------
1 | const iti = require("iti")
2 |
3 | const container = iti
4 | .createContainer()
5 | .add({
6 | doggoName: "Moon Moon",
7 | })
8 | .add((c) => ({
9 | sayName: () => console.log("Doggo's name is " + c.doggoName),
10 | }))
11 | let a = container.items.sayName
12 | let b = container.items.doggoName
13 |
14 | console.log(a, b)
15 |
--------------------------------------------------------------------------------
/examples/node-cjs/node-2.js:
--------------------------------------------------------------------------------
1 | const { createContainer } = require("iti")
2 |
3 | function Doggo(name) {
4 | return {
5 | greetText: "Doggo name is " + name,
6 | }
7 | }
8 |
9 | let root = createContainer()
10 | .add({
11 | doggoName: "Moon Moon",
12 | })
13 | .add((c) => ({
14 | doggo: () => new Doggo(c.doggoName),
15 | }))
16 | .add((c) => ({
17 | sayName: () => {
18 | console.log(c.doggo.greetText)
19 | },
20 | }))
21 | root.get("sayName")
22 |
--------------------------------------------------------------------------------
/examples/node-cjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-node-example-cjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "debug": "^4.3.3",
7 | "lodash": "^4.17.21",
8 | "mobx": "^6.3.12",
9 | "nodemon": "^2.0.15",
10 | "iti": "0.7.0",
11 | "react": "^17.0.2",
12 | "ts-node": "^10.4.0",
13 | "typescript": "^4.5.5"
14 | },
15 | "scripts": {
16 | "start": "node ./dist/server",
17 | "watch": "tsc -w",
18 | "serverWatch": "nodemon -x 'clear;node' ./dist/server"
19 | },
20 | "license": "MIT",
21 | "authors": [
22 | "Nick Olszanski "
23 | ],
24 | "prettier": {
25 | "semi": false,
26 | "singleQuote": false,
27 | "arrowParens": "always",
28 | "trailingComma": "all"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/examples/node-cli/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn-error.log
3 | dist
--------------------------------------------------------------------------------
/examples/node-cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-node-example",
3 | "type": "module",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "debug": "^4.3.3",
8 | "lodash": "^4.17.21",
9 | "mobx": "^6.3.12",
10 | "nodemon": "^2.0.15",
11 | "iti": "0.7.0",
12 | "react": "^17.0.2",
13 | "ts-node": "^10.4.0",
14 | "typescript": "^4.5.5"
15 | },
16 | "scripts": {
17 | "start": "node ./dist/server",
18 | "watch": "tsc -w",
19 | "serverWatch": "nodemon -x 'clear;node' ./dist/server"
20 | },
21 | "license": "MIT",
22 | "authors": [
23 | "Nick Olszanski "
24 | ],
25 | "prettier": {
26 | "semi": false,
27 | "singleQuote": false,
28 | "arrowParens": "always",
29 | "trailingComma": "all"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/node-cli/src/server.ts:
--------------------------------------------------------------------------------
1 | import _ from "lodash"
2 | import { createContainer } from "iti"
3 |
4 | // Step 1: Your application logic stays clean
5 | class Oven {
6 | public pizzasInOven() {
7 | return 3
8 | }
9 | public async preheat() {}
10 | }
11 | class Kitchen {
12 | constructor(public oven: Oven, public manual: string) {}
13 | }
14 |
15 | // Step 2: Add and read simple tokens
16 | let root = createContainer().add({
17 | userManual: "Please preheat before use",
18 | oven: () => new Oven(),
19 | })
20 | root.get("oven")
21 |
22 | // Step 3: Add a useful async provider / container
23 | const kitchenContainer = async ({ oven, userManual }) => {
24 | await oven.preheat()
25 | return {
26 | kitchen: new Kitchen(oven, userManual),
27 | }
28 | }
29 |
30 | // Step 4: Add an async provider
31 | const node = root.add((ctx, node) => ({
32 | kitchen: async () =>
33 | kitchenContainer(await node.getContainerSet(["userManual", "oven"])),
34 | }))
35 | await node.get("kitchen")
36 |
37 | // A SHORT USE MANUAL
38 | // A SHORT USE MANUAL
39 | // A SHORT USE MANUAL
40 |
41 | // ---- Reading
42 |
43 | // Get a single instance
44 | root.get("oven") // Creates a new Oven instance
45 | root.get("oven") // Gets a cached Oven instance
46 |
47 | await node.get("kitchen") // { kitchen: Kitchen } also cached
48 | await node.items.kitchen // same as above
49 |
50 | // Get multiple instances at once
51 | await root.getContainerSet(["oven", "userManual"]) // { userManual: '...', oven: Oven }
52 | await root.getContainerSet((c) => [c.userManual, c.oven]) // same as above
53 |
54 | // Subscribe to container changes
55 | node.subscribeToContainer("oven", (oven) => {})
56 | node.subscribeToContainerSet(["oven", "kitchen"], ({ oven, kitchen }) => {})
57 | // prettier-ignore
58 | node.subscribeToContainerSet((c) => [c.kitchen], ({ oven, kitchen }) => {})
59 | node.on("containerUpdated", ({ key, newContainer }) => {})
60 | node.on("containerUpserted", ({ key, newContainer }) => {})
61 |
62 | // ----Adding
63 |
64 | let node1 = createContainer()
65 | .add({
66 | userManual: "Please preheat before use",
67 | oven: () => new Oven(),
68 | })
69 | .upsert((ctx) => ({
70 | userManual: "Works better when hot",
71 | preheatedOven: async () => {
72 | await ctx.oven.preheat()
73 | return ctx.oven
74 | },
75 | }))
76 |
77 | // `add` is typesafe and a runtime safe method. Hence we've used `upsert`
78 | try {
79 | node1.add({
80 | // @ts-expect-error
81 | userManual: "You shall not pass",
82 | // Type Error: (property) userManual: "You are overwriting this token. It is not safe. Use an unsafe `upsert` method"
83 | })
84 | } catch (err) {
85 | err.message // Error Tokens already exist: ['userManual']
86 | }
87 |
88 | // // async function runStuff() {
89 | // // let a = new AppContainer()
90 |
91 | // // let k = await a.getKitchenContainer()
92 | // // let pp = await a.getPizzaPlaceContainer()
93 |
94 | // // pp.diningTables.addNewTable()
95 | // // pp.diningTables.addNewTable()
96 | // // pp.diningTables.addNewTable()
97 |
98 | // // k.orderManager.orderPizza(pp.diningTables.tables[1])
99 | // // k.orderManager.orderPizza(pp.diningTables.tables[2])
100 |
101 | // // console.log(k.orderManager.orders)
102 | // // k.orderManager.orders.forEach((order) => {
103 | // // console.log(order.pizza.state)
104 | // // console.log(JSON.stringify(order.pizza.ingredients))
105 | // // })
106 | // // }
107 |
108 | // // runStuff().then(() => {
109 | // // console.log("done")
110 | // // })
111 |
112 | // export const x = { a: 12 }
113 |
--------------------------------------------------------------------------------
/examples/node-cli/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src", "types"],
3 | "compilerOptions": {
4 | "module": "esnext",
5 | "target": "esnext",
6 | "outDir": "dist",
7 | "moduleResolution": "node",
8 | "jsx": "preserve",
9 | "baseUrl": "./",
10 | /* Additional Options */
11 | "skipLibCheck": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "resolveJsonModule": true,
14 | "allowSyntheticDefaultImports": true,
15 | "experimentalDecorators": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/examples/node-js/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn-error.log
3 | dist
--------------------------------------------------------------------------------
/examples/node-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-node-example",
3 | "type": "module",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "debug": "^4.3.3",
8 | "lodash": "^4.17.21",
9 | "mobx": "^6.3.12",
10 | "nodemon": "^2.0.15",
11 | "iti": "0.7.0",
12 | "react": "^17.0.2",
13 | "ts-node": "^10.4.0",
14 | "typescript": "^4.5.5"
15 | },
16 | "scripts": {
17 | "start": "node ./dist/server",
18 | "watch": "tsc -w",
19 | "serverWatch": "nodemon -x 'clear;node' ./dist/server"
20 | },
21 | "license": "MIT",
22 | "authors": [
23 | "Nick Olszanski "
24 | ],
25 | "prettier": {
26 | "semi": false,
27 | "singleQuote": false,
28 | "arrowParens": "always",
29 | "trailingComma": "all"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/node-js/src/server.ts:
--------------------------------------------------------------------------------
1 | import _ from "lodash"
2 | import { createContainer } from "iti"
3 |
4 | // Step 1: Your application logic stays clean
5 | class Oven {
6 | public pizzasInOven() {
7 | return 3
8 | }
9 | public async preheat() {}
10 | }
11 | class Kitchen {
12 | constructor(public oven: Oven, public manual: string) {}
13 | }
14 |
15 | // Step 2: Add and read simple tokens
16 | let root = createContainer().add({
17 | userManual: "Please preheat before use",
18 | oven: () => new Oven(),
19 | })
20 | root.get("oven")
21 |
22 | // Step 3: Add a useful async provider / container
23 | const kitchenContainer = async ({ oven, userManual }) => {
24 | await oven.preheat()
25 | return {
26 | kitchen: new Kitchen(oven, userManual),
27 | }
28 | }
29 |
30 | // Step 4: Add an async provider
31 | const node = root.add((ctx, node) => ({
32 | kitchen: async () =>
33 | kitchenContainer(await node.getContainerSet(["userManual", "oven"])),
34 | }))
35 | await node.get("kitchen")
36 |
37 | // A SHORT USE MANUAL
38 | // A SHORT USE MANUAL
39 | // A SHORT USE MANUAL
40 |
41 | // ---- Reading
42 |
43 | // Get a single instance
44 | root.get("oven") // Creates a new Oven instance
45 | root.get("oven") // Gets a cached Oven instance
46 |
47 | await node.get("kitchen") // { kitchen: Kitchen } also cached
48 | await node.items.kitchen // same as above
49 |
50 | // Get multiple instances at once
51 | await root.getContainerSet(["oven", "userManual"]) // { userManual: '...', oven: Oven }
52 | await root.getContainerSet((c) => [c.userManual, c.oven]) // same as above
53 |
54 | // Subscribe to container changes
55 | node.subscribeToContainer("oven", (oven) => {})
56 | node.subscribeToContainerSet(["oven", "kitchen"], ({ oven, kitchen }) => {})
57 | // prettier-ignore
58 | node.subscribeToContainerSet((c) => [c.kitchen], ({ oven, kitchen }) => {})
59 | node.on("containerUpdated", ({ key, newContainer }) => {})
60 | node.on("containerUpserted", ({ key, newContainer }) => {})
61 |
62 | // ----Adding
63 |
64 | let node1 = createContainer()
65 | .add({
66 | userManual: "Please preheat before use",
67 | oven: () => new Oven(),
68 | })
69 | .upsert((ctx) => ({
70 | userManual: "Works better when hot",
71 | preheatedOven: async () => {
72 | await ctx.oven.preheat()
73 | return ctx.oven
74 | },
75 | }))
76 |
77 | // `add` is typesafe and a runtime safe method. Hence we've used `upsert`
78 | try {
79 | node1.add({
80 | // @ts-expect-error
81 | userManual: "You shall not pass",
82 | // Type Error: (property) userManual: "You are overwriting this token. It is not safe. Use an unsafe `upsert` method"
83 | })
84 | } catch (err) {
85 | err.message // Error Tokens already exist: ['userManual']
86 | }
87 |
88 | // // async function runStuff() {
89 | // // let a = new AppContainer()
90 |
91 | // // let k = await a.getKitchenContainer()
92 | // // let pp = await a.getPizzaPlaceContainer()
93 |
94 | // // pp.diningTables.addNewTable()
95 | // // pp.diningTables.addNewTable()
96 | // // pp.diningTables.addNewTable()
97 |
98 | // // k.orderManager.orderPizza(pp.diningTables.tables[1])
99 | // // k.orderManager.orderPizza(pp.diningTables.tables[2])
100 |
101 | // // console.log(k.orderManager.orders)
102 | // // k.orderManager.orders.forEach((order) => {
103 | // // console.log(order.pizza.state)
104 | // // console.log(JSON.stringify(order.pizza.ingredients))
105 | // // })
106 | // // }
107 |
108 | // // runStuff().then(() => {
109 | // // console.log("done")
110 | // // })
111 |
112 | // export const x = { a: 12 }
113 |
--------------------------------------------------------------------------------
/examples/node-mjs/node-1.mjs:
--------------------------------------------------------------------------------
1 | import { createContainer } from "iti"
2 |
3 | const container = createContainer()
4 | .add({
5 | doggoName: "Moon Moon",
6 | })
7 | .add((c) => ({
8 | sayName: () => console.log("Doggo's name is " + c.doggoName),
9 | }))
10 | container.items.sayName
11 |
--------------------------------------------------------------------------------
/examples/node-mjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-node-example-mjs",
3 | "type": "module",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "debug": "^4.3.3",
8 | "lodash": "^4.17.21",
9 | "mobx": "^6.3.12",
10 | "nodemon": "^2.0.15",
11 | "iti": "0.7.0",
12 | "react": "^17.0.2",
13 | "ts-node": "^10.4.0",
14 | "typescript": "^4.5.5"
15 | },
16 | "scripts": {
17 | "start": "node ./dist/server",
18 | "watch": "tsc -w",
19 | "serverWatch": "nodemon -x 'clear;node' ./dist/server"
20 | },
21 | "license": "MIT",
22 | "authors": [
23 | "Nick Olszanski "
24 | ],
25 | "prettier": {
26 | "semi": false,
27 | "singleQuote": false,
28 | "arrowParens": "always",
29 | "trailingComma": "all"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/vite-app/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/examples/vite-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/vite-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-vite-example",
3 | "private": true,
4 | "version": "0.0.1",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "iti": "0.7.0",
13 | "iti-react": "0.7.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.0.15",
19 | "@types/react-dom": "^18.0.6",
20 | "@vitejs/plugin-react": "^2.0.0",
21 | "typescript": "^4.6.4",
22 | "vite": "^3.0.0"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/vite-app/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/vite-app/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | }
13 | .logo:hover {
14 | filter: drop-shadow(0 0 2em #646cffaa);
15 | }
16 | .logo.react:hover {
17 | filter: drop-shadow(0 0 2em #61dafbaa);
18 | }
19 |
20 | @keyframes logo-spin {
21 | from {
22 | transform: rotate(0deg);
23 | }
24 | to {
25 | transform: rotate(360deg);
26 | }
27 | }
28 |
29 | @media (prefers-reduced-motion: no-preference) {
30 | a:nth-of-type(2) .logo {
31 | animation: logo-spin infinite 20s linear;
32 | }
33 | }
34 |
35 | .card {
36 | padding: 2em;
37 | }
38 |
39 | .read-the-docs {
40 | color: #888;
41 | }
42 |
--------------------------------------------------------------------------------
/examples/vite-app/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 | import reactLogo from "./assets/react.svg"
3 | import "./App.css"
4 | import { MyAppContext, useContainer } from "./hooks"
5 | import { app } from "./_bl"
6 |
7 | const Lol = () => {
8 | const [b, bErr] = useContainer().b
9 |
10 | console.log("render", b, bErr)
11 | return 123
12 | }
13 |
14 | function App() {
15 | const [count, setCount] = useState(0)
16 |
17 | return (
18 |
19 |
20 |
21 |
29 |
Vite + React
30 |
31 |
34 |
35 | Edit src/App.tsx and save to test HMR
36 |
37 |
38 |
39 | Click on the Vite and React logos to learn more
40 |
41 |
loading... or error
59 |
60 | return Hello {user.name}!
61 | }
62 | ```
63 |
64 | {quickStartCode}
65 | {wiringCode}
66 |
67 | ```tsx
68 | // Part 3: Usage
69 | import { app } from "./app"
70 |
71 | // Will lazily fetch data and create PaymentService instance
72 | const paymentService = await app.items.paymentService
73 | paymentService.sendMoney()
74 | ```
75 |
76 | ```tsx
77 | // (Optional) With React
78 | import { useContainer } from "./_containers/main-app"
79 |
80 | function Profile() {
81 | const [user, userErr] = useContainer().userData
82 | if (!user || userErr) return loading... or error
83 |
84 | return Hello {user.name}!
85 | }
86 | ```
87 |
--------------------------------------------------------------------------------
/website/docs/4.usage.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | title: Usage
4 | ---
5 |
6 | :::note
7 |
8 | Please know, that the docs is still work in progress. Many features or use cases are probably already in the lib but not documented well. We are working on it.
9 |
10 | :::
11 |
12 | # Short Manual
13 |
14 | ## Reading and Writing data
15 |
16 | **Reading**
17 |
18 | ```ts
19 | // Get a single instance
20 | root.get("oven") // Creates a new Oven instance
21 | root.get("oven") // Gets a cached Oven instance
22 |
23 | await node.get("kitchen") // { kitchen: Kitchen } also cached
24 | await node.items.kitchen // same as above
25 |
26 | // Plain deletion
27 | node.delete("kitchen")
28 |
29 | // Get multiple instances at once
30 | await root.getContainerSet(["oven", "userManual"]) // { userManual: '...', oven: Oven }
31 | await root.getContainerSet((c) => [c.userManual, c.oven]) // same as above
32 |
33 | // Subscribe to container changes
34 | node.subscribeToContainer("oven", (oven) => {})
35 | node.subscribeToContainerSet(["oven", "kitchen"], ({ oven, kitchen }) => {})
36 | // prettier-ignore
37 | node.subscribeToContainerSet((c) => [c.kitchen], ({ oven, kitchen }) => {})
38 | node.on("containerUpdated", ({ key, newItem }) => {})
39 | node.on("containerUpserted", ({ key, newItem }) => {})
40 | node.on("containerDeleted", ({ key, newItem }) => {})
41 |
42 | // Disposing
43 | node
44 | .add({ dbConnection: () => connectToDb(process.env.dbUrl) })
45 | .addDisposer({ dbConnection: (db) => db.disconnect() }) // waits for promise
46 | await node.dispose("dbConnection")
47 | await node.disposeAll()
48 | ```
49 |
50 | **Writing**
51 |
52 | ```ts
53 | let node1 = createContainer()
54 | .add({
55 | userManual: "Please preheat before use",
56 | oven: () => new Oven(),
57 | })
58 | .upsert((containers, node) => ({
59 | userManual: "Works better when hot",
60 | preheatedOven: async () => {
61 | await containers.oven.preheat()
62 | return containers.oven
63 | },
64 | }))
65 |
66 | // `add` is typesafe and a runtime safe method. Hence we've used `upsert`
67 | try {
68 | node1.add({
69 | // @ts-expect-error
70 | userManual: "You shall not pass",
71 | // Type Error: (property) userManual: "You are overwriting this token. It is not safe. Use an unsafe `upsert` method"
72 | })
73 | } catch (err) {
74 | err.message // Error Tokens already exist: ['userManual']
75 | }
76 | ```
77 |
--------------------------------------------------------------------------------
/website/docs/5.patterns-and-tips.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 3
3 | title: Patterns and Tips
4 | ---
5 |
6 | :::note
7 |
8 | Please know, that the docs is still work in progress. Many features or use cases are probably already in the lib but not documented well. We are working on it.
9 |
10 | :::
11 |
12 | # Patterns and Tips
13 |
14 | ## Patterns and tips
15 |
16 | ### Make lazy simple
17 |
18 | Prefer functions over eager init. Why? This will make the app lazy, hence faster.
19 |
20 | ```ts
21 | // Good
22 | createContainer().add({
23 | eventBus: () => new EventBus(),
24 | userAuthService: () => new UserAuthService(),
25 | })
26 |
27 | // Meh...
28 | createContainer().add({
29 | eventBus: new EventBus(),
30 | userAuthService: new UserAuthService(),
31 | })
32 | ```
33 |
34 | In the second example we create instances on IoC container start. Which in most cases is not desirable. With the first example, we use functions, and they will be executed only when requested
35 |
36 | ### Lifecycle
37 |
38 | **Single Instance (a.k.a. Singleton)**
39 |
40 | ```ts
41 | let node = createContainer().add({
42 | oven: () => new Oven(),
43 | })
44 | node.get("oven") === node.get("oven") // true
45 | ```
46 |
47 | **Transient**
48 |
49 | ```ts
50 | let node = createContainer().add({
51 | oven: () => () => new Oven(),
52 | })
53 | node.get("oven") === node.get("oven") // false
54 | ```
55 |
56 | ### Dynamic Imports
57 |
58 | ```ts
59 | // ./kitchen/index.ts
60 | export async function provideKitchenContainer() {
61 | const { Kitchen } = await import("./kitchen/kitchen")
62 | return {
63 | kitchen: () => new Kitchen(),
64 | oven: async () => {
65 | const { Oven } = await import("./kitchen/oven")
66 | const oven = new Oven()
67 | await oven.preheat()
68 | return oven
69 | },
70 | }
71 | }
72 | ```
73 |
74 | ```ts
75 | // ./index.ts
76 | import { createContainer } from "iti"
77 | import { provideKitchenContainer } from "./kitchen"
78 | let node = createContainer().add({
79 | kitchen: async () => provideKitchenContainer(),
80 | })
81 |
82 | // Next line will load `./kitchen/kitchen` module
83 | await node.items.kitchen
84 |
85 | // Next line will load `./kitchen/oven` module
86 | await node.items.kitchen.oven
87 | ```
88 |
89 | ### Tip: Prefer callbacks over of strings (in progress)
90 |
91 | If you use callback pattern across your app, you will be able to mass rename your containerKeys using typescript. With strings, you will have to manually go through the app. But even if you use string literals compiler will not compile until you fix your rename manually across the app.
92 |
93 | ```ts
94 | const node = createContainer().addNode({
95 | a: "A",
96 | b: "B",
97 | })
98 |
99 | await node.get((containerKeys) => containerKeys.a) // BEST!!!
100 | await node.get("a") // it will work but...
101 | ```
102 |
103 | ## Anti Patterns
104 |
105 | in progress
106 |
107 | ## Known issues
108 |
109 | ### TS2589: Type instantiation is excessively deep and possibly infinite
110 |
111 | This bug is caused by a TS hard limit on 50 `instantiationDepth`.
112 |
113 | https://github.com/i18next/react-i18next/issues/1417
114 | https://github.com/microsoft/TypeScript/issues/34933
115 |
116 | As a quick workaround we suggest:
117 |
118 | 1. **Reduce the number of `.add` steps** - this will help in most cases
119 | 2. **Reduce the number of unique tokens** - group some tokens together
120 | 3. **Create multiple containers** - it seems that your app is getting pretty big and complex. Maybe create to 2 containers via `createContainer`?
121 | 4. **Upgrade to TS 4.5 or higher**
122 | 5. **Optimize ITI**
123 |
--------------------------------------------------------------------------------
/website/docs/6.getting-started.md.del:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 6
3 | ---
4 |
5 | # Getting Started
6 |
7 |
8 | ## Getting Started
9 |
10 | The best way to get started is to check [a CRA Pizza example](https://github.com/molszanski/iti/tree/master/examples/cra/src/containers)
11 |
12 | Initial wiring
13 |
14 | ```ts
15 | import { createContainer } from "../../src/library.new-root-container"
16 |
17 | import { provideAContainer } from "./container.a"
18 | import { provideBContainer } from "./container.b"
19 | import { provideCContainer } from "./container.c"
20 |
21 | export type MockAppNode = ReturnType
22 | export function getMainMockAppContainer() {
23 | return createContainer()
24 | .add({ aCont: async () => provideAContainer() })
25 | .add((containers) => {
26 | return {
27 | bCont: async () => provideBContainer(await containers.aCont),
28 | }
29 | })
30 | .add((c) => {
31 | return {
32 | cCont: async () => provideCContainer(await c.aCont, await c.bCont, k),
33 | }
34 | })
35 | }
36 | ```
37 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/0_by_hand.ts:
--------------------------------------------------------------------------------
1 | // prettier-ignore
2 | interface Logger { info: (msg: string) => void }
3 | // prettier-ignore
4 | class ConsoleLogger implements Logger { info(msg: string): void { console.log("[Console]:", msg) } }
5 | // prettier-ignore
6 | class PinoLogger implements Logger { info(msg: string): void { console.log("[Pino]:" , msg) } }
7 |
8 | // Part 1: Business Entities
9 | interface UserData {
10 | name: string
11 | }
12 |
13 | class AuthService {
14 | async getUserData(): Promise {
15 | return { name: "Big Lebowski" }
16 | }
17 | }
18 |
19 | class User {
20 | constructor(private data: UserData) {}
21 | name = () => this.data.name
22 | }
23 |
24 | class PaymentService {
25 | constructor(private readonly logger: Logger, private readonly user: User) {}
26 | sendMoney() {
27 | this.logger.info(`Sending monery to the: ${this.user.name()} `)
28 | return true
29 | }
30 | }
31 |
32 | // Step 2: Manual DI
33 | export async function runMyApp() {
34 | const logger =
35 | process.env.NODE_ENV === "production"
36 | ? new PinoLogger()
37 | : new ConsoleLogger()
38 |
39 | const auth = new AuthService()
40 | const user = new User(await auth.getUserData())
41 |
42 | const paymentService = new PaymentService(logger, user)
43 | paymentService.sendMoney()
44 | }
45 |
46 | console.log(" ---- My App START \n\n")
47 | runMyApp().then(() => {
48 | console.log("\n\n ---- My App END")
49 | })
50 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/1_ts-inject.ts:
--------------------------------------------------------------------------------
1 | import { createInjector } from "typed-inject"
2 | // prettier-ignore
3 | interface Logger { info: (msg: string) => void }
4 | // prettier-ignore
5 | class ConsoleLogger implements Logger { info(msg: string): void { console.log("[Console]:", msg) } }
6 | // prettier-ignore
7 | class PinoLogger implements Logger { info(msg: string): void { console.log("[Pino]:" , msg) } }
8 |
9 | interface UserData {
10 | name: string
11 | }
12 |
13 | class AuthService {
14 | async getUserData(): Promise {
15 | return { name: "Big Lebowski" }
16 | }
17 | }
18 |
19 | const Token = Object.freeze({
20 | logger: "logger",
21 | consoleLogger: "consoleLogger",
22 | pinoLogger: "pinoLogger",
23 | authService: "authService",
24 | user: "user",
25 | userData: "userData",
26 | paymentService: "paymentService",
27 | } as const)
28 |
29 | class User {
30 | public static inject = [Token.userData] as const
31 | constructor(private data: UserData) {
32 | console.log("constructing user")
33 | }
34 | name = () => this.data.name
35 | }
36 |
37 | class PaymentService {
38 | public static inject = [Token.logger, Token.user] as const
39 | constructor(private readonly logger: Logger, private readonly user: User) {}
40 | sendMoney() {
41 | this.logger.info(`Sending monery to the: ${this.user.name()} `)
42 | return true
43 | }
44 | }
45 |
46 | /// INJECTING
47 |
48 | export async function runMyApp() {
49 | const container = createInjector()
50 | .provideFactory("logger", () =>
51 | process.env.NODE_ENV === "production"
52 | ? new PinoLogger()
53 | : new ConsoleLogger()
54 | )
55 | .provideClass(Token.authService, AuthService)
56 |
57 | const authService = container.resolve(Token.authService)
58 | const userData = await authService.getUserData()
59 |
60 | const container2 = container
61 | .provideValue(Token.userData, userData)
62 | .provideClass(Token.user, User)
63 | .provideClass(Token.paymentService, PaymentService)
64 |
65 | const ps = container2.resolve(Token.paymentService)
66 | ps.sendMoney()
67 | }
68 |
69 | console.log(" ---- My App START \n\n")
70 | runMyApp().then(() => {
71 | console.log("\n\n ---- My App END")
72 | })
73 |
74 | /**
75 | * There is another option where we add an async function
76 | * to a factory like this:
77 | *
78 | * container.provideFactory('user', async () => { name: 'Alice' })
79 | *
80 | * but then all typings go crazy and basically
81 | * we write in JS :/
82 | */
83 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/2_tsyringe.ts:
--------------------------------------------------------------------------------
1 | import "reflect-metadata"
2 | import {
3 | container,
4 | injectable,
5 | inject,
6 | singleton,
7 | predicateAwareClassFactory,
8 | } from "tsyringe"
9 | // prettier-ignore
10 | interface Logger { info: (msg: string) => void }
11 | // prettier-ignore
12 | @injectable()
13 | class ConsoleLogger implements Logger { info(msg: string): void { console.log("[Console]:", msg) } }
14 | // prettier-ignore
15 | @injectable()
16 | class PinoLogger implements Logger { info(msg: string): void { console.log("[Pino]:" , msg) } }
17 |
18 | interface UserData {
19 | name: string
20 | }
21 |
22 | @injectable()
23 | class AuthService {
24 | async getUserData(): Promise {
25 | return { name: "Big Lebowski" }
26 | }
27 | }
28 |
29 | const Token = Object.freeze({
30 | logger: "logger",
31 | consoleLogger: "consoleLogger",
32 | pinoLogger: "pinoLogger",
33 | authService: "authService",
34 | user: "user",
35 | userData: "userData",
36 | paymentService: "paymentService",
37 | } as const)
38 |
39 | // @singleton()
40 | @injectable()
41 | class User {
42 | constructor(@inject(Token.userData) private data: UserData) {
43 | console.log("constructing user")
44 | }
45 | name = () => this.data.name
46 | }
47 |
48 | @injectable()
49 | class PaymentService {
50 | constructor(
51 | @inject(Token.logger) private readonly logger: Logger,
52 | @inject(User) private readonly user: User
53 | ) {}
54 | sendMoney() {
55 | this.logger.info(`Sending monery to the: ${this.user.name()} `)
56 | return true
57 | }
58 | }
59 |
60 | /// INJECTING
61 |
62 | export async function runMyApp() {
63 | container.register(Token.logger, {
64 | useFactory: predicateAwareClassFactory(
65 | (c) => {
66 | // c.resolve(PinoLogger)
67 | return process.env.NODE_ENV === "production"
68 | },
69 | ConsoleLogger,
70 | PinoLogger
71 | ),
72 | })
73 |
74 | // Danger zone 1
75 | const auth = container.resolve(AuthService)
76 | const d = await auth.getUserData()
77 | container.register(Token.userData, { useValue: d })
78 |
79 | // Dange zone 2
80 | container.resolve(User)
81 | container.resolve(User)
82 |
83 | const ps = container.resolve(PaymentService)
84 | ps.sendMoney()
85 | }
86 |
87 | console.log(" ---- My App START \n\n")
88 | runMyApp().then(() => {
89 | console.log("\n\n ---- My App END")
90 | })
91 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main-example.ts:
--------------------------------------------------------------------------------
1 | import { createContainer } from "iti"
2 | // prettier-ignore
3 | interface Logger { info: (msg: string) => void }
4 | // prettier-ignore
5 | class ConsoleLogger implements Logger { info(msg: string): void { console.log("[Console]:", msg) } }
6 | // prettier-ignore
7 | class PinoLogger implements Logger { info(msg: string): void { console.log("[Pino]:" , msg) } }
8 |
9 | // Part 1: Business Entities
10 | interface UserData {
11 | name: string
12 | }
13 |
14 | class AuthService {
15 | async getUserData(): Promise {
16 | return { name: "Big Lebowski" }
17 | }
18 | }
19 |
20 | class PaymentService {
21 | constructor(
22 | private readonly logger: Logger,
23 | private readonly user: UserData
24 | ) {}
25 | sendMoney() {
26 | this.logger.info(`Sending money to the: ${this.user.name} `)
27 | return true
28 | }
29 | }
30 |
31 | // Step 2: Manual DI
32 | export async function runMyApp() {
33 | const logger =
34 | process.env.NODE_ENV === "production"
35 | ? new PinoLogger()
36 | : new ConsoleLogger()
37 |
38 | const auth = new AuthService()
39 | const userData = await auth.getUserData()
40 |
41 | const paymentService = new PaymentService(logger, userData)
42 | paymentService.sendMoney()
43 | }
44 |
45 | export async function runMyApp2() {
46 | const root = createContainer()
47 | .add({
48 | logger: () =>
49 | process.env.NODE_ENV === "production"
50 | ? new PinoLogger()
51 | : new ConsoleLogger(),
52 | auth: () => new AuthService(),
53 | })
54 | .add((ctx) => ({
55 | paymentService: async () =>
56 | new PaymentService(ctx.logger, await ctx.auth.getUserData()),
57 | }))
58 |
59 | const paymentService = await root.items.paymentService
60 | paymentService.sendMoney()
61 | }
62 |
63 | console.log(" ---- My App START \n\n")
64 | runMyApp().then(() => {
65 | console.log("\n\n ---- My App END")
66 | })
67 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/app.ts:
--------------------------------------------------------------------------------
1 | // Part 2: ITI boilerplate. Manual DI alternative
2 | import { createContainer } from "iti"
3 | import {
4 | PaymentService,
5 | AuthService,
6 | CookieStorageService,
7 | } from "./business-logic"
8 | import { PinoLogger, ConsoleLogger } from "./loggers"
9 |
10 | export const app = createContainer()
11 | .add({
12 | // Add token `logger` and assign some logger instance
13 | logger: () =>
14 | process.env.NODE_ENV === "production"
15 | ? new PinoLogger()
16 | : new ConsoleLogger(),
17 | // Add token `cookieStorage` ...
18 | cookieStorage: () => new CookieStorageService(),
19 | })
20 | .add((ctx) => ({
21 | auth: () => new AuthService(ctx.cookieStorage),
22 | }))
23 | .add((ctx) => ({
24 | userData: async () => await ctx.auth.getUserData(),
25 | }))
26 | .add((ctx) => ({
27 | paymentService: async () =>
28 | new PaymentService(ctx.logger, await ctx.userData),
29 | }))
30 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/business-logic.ts:
--------------------------------------------------------------------------------
1 | // Part 1: Normal Application Business Logic
2 | interface Logger {
3 | info: (msg: string) => void
4 | }
5 |
6 | interface UserData {
7 | name: string
8 | }
9 |
10 | export class CookieStorageService {
11 | async getSessionToken(): Promise<{ token: string }> {
12 | return { token: "magicToken123" }
13 | }
14 | }
15 |
16 | export class AuthService {
17 | constructor(private cookieStorageService: CookieStorageService) {}
18 | async getUserData(): Promise {
19 | const { token } = await this.cookieStorageService.getSessionToken()
20 | if (token === "magicToken123") {
21 | return { name: "Big Lebowski" }
22 | }
23 | throw new Error("Unauthorized")
24 | }
25 | }
26 |
27 | export class PaymentService {
28 | constructor(
29 | private readonly logger: Logger,
30 | private readonly user: UserData
31 | ) {}
32 | sendMoney() {
33 | this.logger.info(`Sending money to the: ${this.user.name} `)
34 | return true
35 | }
36 | }
37 |
38 | // Application code is free of framework dependencies like decorators
39 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/loggers.ts:
--------------------------------------------------------------------------------
1 | interface Logger {
2 | info: (msg: string) => void
3 | }
4 | export class ConsoleLogger implements Logger {
5 | info(msg: string): void {
6 | console.log("[Console]:", msg)
7 | }
8 | }
9 | export class PinoLogger implements Logger {
10 | info(msg: string): void {
11 | console.log("[Pino]:", msg)
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/manual-di.ts:
--------------------------------------------------------------------------------
1 | const logger =
2 | process.env.NODE_ENV === "production" ? new PinoLogger() : new ConsoleLogger()
3 |
4 | const auth = new AuthService()
5 | const userData = await auth.getUserData()
6 |
7 | const paymentService = new PaymentService(logger, userData)
8 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/with.tsx:
--------------------------------------------------------------------------------
1 | import { app } from "./app"
2 |
3 | // Proxy Getter: Lazily creates PaymentService instance
4 | const paymentService = await app.items.paymentService
5 | paymentService.sendMoney()
6 |
--------------------------------------------------------------------------------
/website/docs/6_async_start-PART-2/main/without.ts:
--------------------------------------------------------------------------------
1 | import {
2 | PaymentService,
3 | AuthService,
4 | CookieStorageService,
5 | } from "./business-logic"
6 | import { PinoLogger, ConsoleLogger } from "./loggers"
7 |
8 | const logger =
9 | process.env.NODE_ENV === "production" ? new PinoLogger() : new ConsoleLogger()
10 |
11 | const app = async () => {
12 | const cookieStorage = new CookieStorageService()
13 | const auth = new AuthService(cookieStorage)
14 | const userData = await auth.getUserData()
15 | const paymentService = new PaymentService(logger, userData)
16 |
17 | return {
18 | paymentService,
19 | }
20 | }
21 |
22 | app().then(({ paymentService }) => {
23 | paymentService.sendMoney()
24 | })
25 |
--------------------------------------------------------------------------------
/website/docs/7.5.playground.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 7
3 | slug: playground
4 | title: Playground
5 | ---
6 |
7 | # Playground
8 |
9 | You can launch a live browser [playground on Stackblitz website][1] or `checkout` the
10 | [playground repo](https://github.com/molszanski/iti-playground)
11 |
12 | ```bash
13 | git clone git@github.com:molszanski/iti-playground.git
14 | cd iti-playground/src/
15 | ```
16 |
17 | [Try it out live (on Stacklitz, an instant browser dev environment )][1]
18 |
19 |
20 |
21 | 
22 |
23 |
24 |
25 | https://stackblitz.com/github/molszanski/iti-playground/tree/main
26 |
27 | [0]: https://michel.codes/blogs/ui-as-an-afterthought
28 | [1]: https://stackblitz.com/github/molszanski/iti-playground/tree/main?file=src%2F_0.business-logic.ts&file=src%2FApp.tsx
29 |
--------------------------------------------------------------------------------
/website/docs/8.benefits-of-iti.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 6
3 | ---
4 |
5 | # Benefits
6 |
7 | _work in progress_
8 |
9 | ## Typescript
10 |
11 | Iti has a great typescript support. All types are resolved automatically and check at compile time.
12 |
13 | 
14 | 
15 | 
16 | 
17 |
--------------------------------------------------------------------------------
/website/docs/9.api/addDisposer.ts:
--------------------------------------------------------------------------------
1 | import { createContainer } from "iti"
2 | import { Client } from "pg"
3 |
4 | class A {}
5 |
6 | createContainer()
7 | .add({
8 | db: async () => {
9 | const pg = new Client(process.env["DB_CONNECTION_URL"])
10 | await pg.connect()
11 | return pg
12 | },
13 | })
14 | .add((ctx) => ({
15 | a: () => new A(),
16 | b: async () => {
17 | const db = await ctx.db
18 | db.query("SELECT 1")
19 | },
20 | }))
21 | // ↓ `ctx` to access any other dependency
22 | .addDisposer((ctx) => ({
23 | // ↓ `db` is a resolved value of a `DB`
24 | db: (db) => {
25 | console.log(ctx.a)
26 | return db.disconnect()
27 | },
28 | }))
29 |
30 | class B {}
31 | const container = createContainer()
32 | .add({
33 | a: () => new A(),
34 | b: () => new B(),
35 | })
36 | .addDisposer({
37 | a: (a) => console.log("disposing a", a),
38 | })
39 |
40 | container.dispose("a")
41 |
--------------------------------------------------------------------------------
/website/docs/9.api/disposeAll.ts:
--------------------------------------------------------------------------------
1 | import { Client } from "pg"
2 | import { createContainer } from "iti"
3 |
4 | const container = createContainer()
5 | .add(() => ({
6 | dbConnection: async () => {
7 | const pg = new Client(process.env["DB_CONNECTION_URL"])
8 | await pg.connect()
9 | return pg
10 | },
11 | }))
12 | .addDisposer({
13 | dbConnection: (dbConnection) => dbConnection.end(),
14 | })
15 |
16 | const db = await container.get("dbConnection")
17 | await db.query("...")
18 |
19 | // Later..
20 | await container.disposeAll()
21 |
22 | console.log("All dependencies disposed, you can exit now. :)")
23 |
--------------------------------------------------------------------------------
/website/docs/assets/stackblitz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/assets/stackblitz.png
--------------------------------------------------------------------------------
/website/docs/assets/ts/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/assets/ts/1.png
--------------------------------------------------------------------------------
/website/docs/assets/ts/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/assets/ts/2.png
--------------------------------------------------------------------------------
/website/docs/assets/ts/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/assets/ts/3.png
--------------------------------------------------------------------------------
/website/docs/assets/ts/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/assets/ts/4.png
--------------------------------------------------------------------------------
/website/docs/async-di/1.manual-di.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | import CodeBlock from "@theme/CodeBlock"
6 | import manualDi from "!!raw-loader!../6_async_start-PART-2/0_by_hand.ts"
7 |
8 | # Pure DI
9 |
10 | {manualDi}
11 |
--------------------------------------------------------------------------------
/website/docs/async-di/3.syringe.mdx.hidden:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # Syringe
6 |
7 | _work in progress_
8 |
--------------------------------------------------------------------------------
/website/docs/async-di/4.typed-inject.mdx.hi:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | ---
4 |
5 | # Typed Inject
6 |
7 | _work in progress_
8 |
--------------------------------------------------------------------------------
/website/docs/async-di/5.iti.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 5
3 | tags:
4 | - Demo
5 | - Getting started
6 | ---
7 |
8 | # ITI
9 |
10 | ```ts
11 | import { createContainer } from "iti"
12 | // prettier-ignore
13 | interface Logger { info: (msg: string) => void }
14 | // prettier-ignore
15 | class ConsoleLogger implements Logger { info(msg: string): void { console.log("[Console]:", msg) } }
16 | // prettier-ignore
17 | class PinoLogger implements Logger { info(msg: string): void { console.log("[Pino]:" , msg) } }
18 |
19 | interface UserData {
20 | name: string
21 | }
22 |
23 | class AuthService {
24 | async getUserData(): Promise {
25 | return { name: "Big Lebowski" }
26 | }
27 | }
28 |
29 | class User {
30 | constructor(private data: UserData) {}
31 | name = () => this.data.name
32 | }
33 |
34 | class PaymentService {
35 | constructor(private readonly logger: Logger, private readonly user: User) {}
36 | sendMoney() {
37 | this.logger.info(`Sending monery to the: ${this.user.name()} `)
38 | return true
39 | }
40 | }
41 |
42 | export async function runMyApp() {
43 | const root = createContainer()
44 | .add({
45 | logger: () =>
46 | process.env.NODE_ENV === "production"
47 | ? new PinoLogger()
48 | : new ConsoleLogger(),
49 | })
50 | .add({ auth: new AuthService() })
51 | .add((ctx) => ({
52 | user: async () => new User(await ctx.auth.getUserData()),
53 | }))
54 | .add((ctx) => ({
55 | paymentService: async () =>
56 | new PaymentService(ctx.logger, await ctx.user),
57 | }))
58 |
59 | const ps = await root.items.paymentService
60 | ps.sendMoney()
61 | }
62 |
63 | console.log(" ---- My App START \n\n")
64 | runMyApp().then(() => {
65 | console.log("\n\n ---- My App END")
66 | })
67 | ```
68 |
--------------------------------------------------------------------------------
/website/docs/async-di/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Async DI Example",
3 | "position": 40,
4 | "link": {
5 | "type": "generated-index"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/website/docs/basic-di/1.manual-di.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | # Pure DI
6 |
7 | ```ts
8 | export interface Logger {
9 | info: (msg: string) => void
10 | warn: (msg: string) => void
11 | error: (msg: string) => void
12 | }
13 |
14 | export class ConsoleLogger implements Logger {
15 | info(msg: string): void {
16 | console.log("Console Logger: ", msg)
17 | }
18 | warn(msg: string): void {}
19 | error(msg: string): void {}
20 | }
21 |
22 | export class PinoLogger implements Logger {
23 | info(msg: string): void {
24 | console.log("Pino Logger: ", msg)
25 | }
26 | warn(msg: string): void {}
27 | error(msg: string): void {}
28 | }
29 |
30 | export class PaymentService {
31 | private readonly logger: Logger
32 | constructor(_logger: Logger) {
33 | this.logger = _logger
34 | }
35 |
36 | sendMoney() {
37 | this.logger.info("inversify logger info")
38 | return true
39 | }
40 | }
41 |
42 | const logger =
43 | process.env.NODE_ENV === "production" ? new PinoLogger() : new ConsoleLogger()
44 |
45 | const paymentService = new PaymentService(logger)
46 | paymentService.sendMoney()
47 | ```
48 |
--------------------------------------------------------------------------------
/website/docs/basic-di/2.inversify.mdx.hidden:
--------------------------------------------------------------------------------
1 | _work in progress_
2 |
--------------------------------------------------------------------------------
/website/docs/basic-di/3.syringe.mdx.hidden:
--------------------------------------------------------------------------------
1 | _work in progress_
2 |
--------------------------------------------------------------------------------
/website/docs/basic-di/4.typed-inject.mdx.hidden:
--------------------------------------------------------------------------------
1 | _work in progress_
2 |
--------------------------------------------------------------------------------
/website/docs/basic-di/5.iti.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # ITI DI
6 |
7 | ```ts
8 | import { createContainer } from "iti"
9 | export interface Logger {
10 | info: (msg: string) => void
11 | warn: (msg: string) => void
12 | error: (msg: string) => void
13 | }
14 |
15 | export class ConsoleLogger implements Logger {
16 | info(msg: string): void {
17 | console.log("Console Logger: ", msg)
18 | }
19 | warn(msg: string): void {}
20 | error(msg: string): void {}
21 | }
22 |
23 | export class PinoLogger implements Logger {
24 | info(msg: string): void {
25 | console.log("Pino Logger: ", msg)
26 | }
27 | warn(msg: string): void {}
28 | error(msg: string): void {}
29 | }
30 |
31 | export class PaymentService {
32 | private readonly logger: Logger
33 | constructor(_logger: Logger) {
34 | this.logger = _logger
35 | }
36 |
37 | sendMoney() {
38 | this.logger.info("inversify logger info")
39 | return true
40 | }
41 | }
42 |
43 | const root = createContainer()
44 | .add({
45 | logger: () =>
46 | process.env.NODE_ENV === "production"
47 | ? new PinoLogger()
48 | : new ConsoleLogger(),
49 | })
50 | .add((ctx) => ({
51 | paymentService: () => new PaymentService(ctx.logger),
52 | }))
53 |
54 | const ps = root.congainers.paymentService
55 | ps.sendMoney()
56 | ```
57 |
--------------------------------------------------------------------------------
/website/docs/basic-di/6.iti-vs-pure.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 7
3 | ---
4 |
5 | import Tabs from "@theme/Tabs"
6 | import TabItem from "@theme/TabItem"
7 |
8 | # Pure DI vs ITI
9 |
10 | ## Business logic
11 |
12 | With ITI and Pure DI your business logic stays exactly the same.
13 | There is no need to add any framework specific decorators or `extends`.
14 |
15 | ```ts
16 | export interface Logger {
17 | info: (msg: string) => void
18 | warn: (msg: string) => void
19 | error: (msg: string) => void
20 | }
21 |
22 | export class ConsoleLogger implements Logger {
23 | info(msg: string): void {
24 | console.log("Console Logger: ", msg)
25 | }
26 | warn(msg: string): void {}
27 | error(msg: string): void {}
28 | }
29 |
30 | export class PinoLogger implements Logger {
31 | info(msg: string): void {
32 | console.log("Pino Logger: ", msg)
33 | }
34 | warn(msg: string): void {}
35 | error(msg: string): void {}
36 | }
37 |
38 | export class PaymentService {
39 | private readonly logger: Logger
40 | constructor(_logger: Logger) {
41 | this.logger = _logger
42 | }
43 |
44 | sendMoney() {
45 | this.logger.info("inversify logger info")
46 | return true
47 | }
48 | }
49 | ```
50 |
51 | ## Wiring
52 |
53 |
54 |
55 |
56 | ```ts title="./src/app.ts"
57 | const logger =
58 | process.env.NODE_ENV === "production" ? new PinoLogger() : new ConsoleLogger()
59 |
60 | const paymentService = new PaymentService(logger)
61 | paymentService.sendMoney()
62 | ```
63 |
64 |
65 |
66 |
67 | ```tsx title="./src/app.ts"
68 | const root = createContainer()
69 | .add({
70 | logger: () =>
71 | process.env.NODE_ENV === "production"
72 | ? new PinoLogger()
73 | : new ConsoleLogger(),
74 | })
75 | .add((ctx) => ({
76 | paymentService: () => new PaymentService(ctx.logger),
77 | }))
78 |
79 | const ps = root.items.paymentService
80 | ps.sendMoney()
81 | ```
82 |
83 |
84 |
85 |
86 |
87 | ## Async Request for single item in ITI
88 |
--------------------------------------------------------------------------------
/website/docs/basic-di/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Basic DI Example",
3 | "position": 30,
4 | "link": {
5 | "type": "generated-index"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/website/docs/examples/circular-dependency.ts:
--------------------------------------------------------------------------------
1 | import { createContainer } from "iti"
2 |
3 | /*
4 | // Part 1: You can create a circular dependency
5 | // in your business logic
6 | ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐
7 | │ A │──▶│ B │──▶│ C │──▶│ D │──▶│ E │
8 | └───┘ └───┘ └───┘ └───┘ └───┘
9 | ▲ │
10 | │ │
11 | └───────────────┘
12 | */
13 | class A {
14 | constructor() {}
15 | }
16 | class B {
17 | constructor(a: A) {}
18 | }
19 | class C {
20 | constructor(b: B, e: E) {}
21 | }
22 | class D {
23 | constructor(c: C) {}
24 | }
25 | class E {
26 | constructor(d: E) {}
27 | }
28 |
29 | // Part 2: You can't express a circular dependency because of typescript checks
30 | createContainer()
31 | .add((ctx) => ({
32 | a: () => new A(),
33 | }))
34 | .add((ctx) => ({
35 | b: () => new B(ctx.a),
36 | }))
37 | .add((ctx) => ({
38 | // This line will throw a Typescript error at compile time
39 | c: () => new C(ctx.a, ctx.e),
40 | }))
41 |
--------------------------------------------------------------------------------
/website/docs/examples/oven-business-logic.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molszanski/iti/890f3bfa6d5923e6fe6c9e03c9bfd186b276b4da/website/docs/examples/oven-business-logic.ts
--------------------------------------------------------------------------------
/website/docs/with-react/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "React",
3 | "position": 20,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "Working with React"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/website/docs/with-react/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # Ensure Sync Containers
6 |
7 | _work in progress_
8 |
9 | ```tsx title="./src/_containers-react/EnsureEcommerce.tsx"
10 | import React, { useContext } from "react"
11 | import { generateEnsureContainerSet } from "iti-react"
12 | import { useContainerSet } from "./_editor-app-hooks"
13 |
14 | const x = generateEnsureContainerSet(() =>
15 | useContainerSet(["ecommerce", "auth"])
16 | )
17 | export const EnsureEcommerceContainer = x.EnsureWrapper
18 | export const useEcommerceContext = x.contextHook
19 | ```
20 |
21 | ```tsx title="./src/App.tsx"
22 | import { EnsureEcommerceContainer } from "./_containers-react/EnsureEcommerce"
23 |
24 | export const App = () => (
25 |
26 | Loading}>
27 |
28 |
29 |
30 | )
31 | ```
32 |
33 | ```tsx title="./src/Currency.tsx"
34 | import { useEcommerceContext } from "../../../../_containers-react/EnsureEcommerce"
35 |
36 | export const CurrencyInfo = () => {
37 | const { currencyStore, taxStore } = useEcommerceContext().ecommerce
38 |
39 | return {currencyStore.currency}
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/website/docs/with-react/configuration.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 3
3 | ---
4 |
5 | # Full Example Configuration
6 |
7 | Basically, we create an ITI instance, add it to `React.Context` and generate fetch hooks.
8 |
9 | ```tsx title="./src/_containers/main-app"
10 | import { createContainer } from "iti"
11 |
12 | export const mainApp = () =>
13 | createContainer().add(() => ({
14 | auth: async () => {
15 | const res = await fetch("/api/profile")
16 | return {
17 | profile: res.json(),
18 | }
19 | },
20 | }))
21 | export type MainAppContainer = ReturnType
22 | ```
23 |
24 | ```tsx title="./src/_containers/hooks"
25 | import React from "react"
26 | import { getContainerSetHooks } from "iti-react"
27 | import { MainAppContainer } from "./_containers/main-app"
28 |
29 | export const MyAppContext = React.createContext({})
30 |
31 | const hooks = getContainerSetHooks(MyAppContext)
32 | export const useContainerSet = hooks.useContainerSet
33 | export const useContainer = hooks.useContainer
34 | ```
35 |
36 | ```tsx title="./src/App.tsx"
37 | import React, { useContext } from "react"
38 | import { mainApp } from "./_containers/main-app"
39 | import { MyAppContext } from "./_containers/hooks"
40 | import { Profile } from "./Profile"
41 |
42 | function App() {
43 | const itiContainerInstance = useMemo(() => mainApp(), [])
44 |
45 | return (
46 | <>
47 |
48 |
49 |
50 |
51 | )
52 | }
53 | ```
54 |
55 | ```tsx title="./src/Profile.tsx"
56 | import { useContainer } from "./_containers/main-app"
57 |
58 | function Profile() {
59 | const [auth, authErr] = useContainer().auth
60 |
61 | if (authErr) return failed to load
62 | if (!auth) return loading...
63 |
64 | return hello {auth.profile.name}!
65 | }
66 | ```
67 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "iti-docs-docosaurus",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "clear": "docusaurus clear",
12 | "serve": "docusaurus serve",
13 | "write-translations": "docusaurus write-translations",
14 | "write-heading-ids": "docusaurus write-heading-ids"
15 | },
16 | "dependencies": {
17 | "@docusaurus/core": "2.1.0",
18 | "@docusaurus/preset-classic": "2.1.0",
19 | "@mdx-js/react": "^1.6.22",
20 | "clsx": "^1.2.1",
21 | "docusaurus-lunr-search": "^2.2.0",
22 | "iti": "^0.5.0",
23 | "iti-react": "^0.5.0",
24 | "prism-react-renderer": "^1.3.5",
25 | "raw-loader": "^4.0.2",
26 | "react": "^18.2.0",
27 | "react-dom": "^18.2.0"
28 | },
29 | "devDependencies": {
30 | "@docusaurus/module-type-aliases": "2.1.0",
31 | "prettier": "^2.7.1"
32 | },
33 | "prettier": {
34 | "printWidth": 80,
35 | "semi": false,
36 | "trailingComma": "es5",
37 | "arrowParens": "always",
38 | "endOfLine": "lf"
39 | },
40 | "browserslist": {
41 | "production": [
42 | ">0.5%",
43 | "not dead",
44 | "not op_mini all"
45 | ],
46 | "development": [
47 | "last 1 chrome version",
48 | "last 1 firefox version",
49 | "last 1 safari version"
50 | ]
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/website/sidebars.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creating a sidebar enables you to:
3 | - create an ordered group of docs
4 | - render a sidebar for each doc of that group
5 | - provide next/previous navigation
6 |
7 | The sidebars can be generated from the filesystem, or explicitly defined here.
8 |
9 | Create as many sidebars as you want.
10 | */
11 |
12 | // @ts-check
13 |
14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15 | const sidebars = {
16 | // By default, Docusaurus generates a sidebar from the docs folder structure
17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
18 |
19 | // But you can create a sidebar manually
20 | /*
21 | tutorialSidebar: [
22 | {
23 | type: 'category',
24 | label: 'Tutorial',
25 | items: ['hello'],
26 | },
27 | ],
28 | */
29 | };
30 |
31 | module.exports = sidebars;
32 |
--------------------------------------------------------------------------------
/website/src/components/HomepageFeatures/index.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import clsx from "clsx"
3 | import styles from "./styles.module.css"
4 |
5 | const FeatureList = [
6 | {
7 | title: "Pure DI Upgrade",
8 | Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
9 | description: (
10 | <>
11 | You are using a DI already. Progressively upgrade and reap
12 | ITI benefits
13 |
14 | ),
15 | },
16 | {
17 | title: "Type Safe",
18 | Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
19 | description: (
20 | <>
21 | If your project compiles your dependencies will resolve correctly at a
22 | runtime
23 |
24 | ),
25 | },
26 | {
27 | title: "Asynchronous",
28 | Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
29 | description: <>Your app is asynchronousm so should be your framework,
30 | },
31 | {
32 | title: "React Compatible",
33 | Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
34 | description: (
35 | <>
36 | Useful React bindings. Extract
37 | application business logic from a React hooks and components
38 |
39 | ),
40 | },
41 | ]
42 |
43 | function Feature({ Svg, title, description }) {
44 | return (
45 |
46 | {/*
47 |
48 |
*/}
49 |
50 |
{title}
51 |
{description}
52 |
53 |
24 |