+++

stack--current/5-incubator/inactive/client--browser/notes--generic-app.md

@@ -9,7 +9,8 @@ Snowflake!!
 // features
 
 
-
+> ReferenceError: React is not defined
+Need `import React from "react"`
 
 
 ## Priorities

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/.parcelrc

@@ -0,0 +1,3 @@
+{
+	"extends": "@offirmo-private/parcel-config--default"
+}

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/package.json

@@ -7,46 +7,49 @@
 
 	"sideEffects": false,
 	"type": "module",
-	"source": "src/index.ts",
-	"exports": {
-		".": {
-			"import": "./dist/src.es2023.esm/index.js"
-		}
-	},
-	"module": "dist/src.es2023.esm/index.js",
-	"typings": "dist/src.es2023.esm/index.d.ts",
+	"source": "src/hateoas/web/index.html",
 
-	"peerDependencies": {
-		"@offirmo-private/soft-execution-context": "*",
-		"tslib": "^2"
+	"scripts": {
+		"clean": "monorepo-script--clean-package …dist …cache",
+
+		"_build:dev:watch": "monorepo-script--build-typescript-package --watch --module=esm",
+		"dev": "run-s clean _build:dev:watch",
+
+		"demo": "node ./dist/src.es2023.esm/demo/index.js",
+		"demoh": "node ./dist/src.es2023.esm/hateoas/index.js",
+
+		"start:parcel": "parcel serve src/hateoas/web/index.html --port 8080  --lazy  --no-autoinstall",
+		"demow": "npm-run-all  clean  --parallel start:parcel",
+		"devw--pub": "ngrok http 8080 --domain=national-rat-supreme.ngrok-free.app"
 	},
+
+	"size-limit": [
+		{
+			"limit": "700kb",
+			"path": "dist/index.js"
+		}
+	],
+
 	"dependencies": {
 		"@offirmo-private/rich-text-format": "^0",
+		"@offirmo-private/soft-execution-context": "*",
 		"@offirmo-private/state-utils": "*",
 		"@offirmo-private/timestamps": "*",
 		"@offirmo-private/ts-types": "*",
 		"@offirmo-private/view--chat": "*",
 		"@tbrpg/state": "*",
 		"@tbrpg/ui--rich-text": "^0",
 		"tiny-invariant": "^1",
+		"tslib": "^2",
 		"typescript-string-enums": "^1"
 	},
-	"scripts": {
-		"clean": "monorepo-script--clean-package …dist",
-
-		"_build:dev:watch": "monorepo-script--build-typescript-package --watch --module=esm",
-		"dev": "run-s clean _build:dev:watch",
-
-		"demo": "node ./dist/src.es2023.esm/demo/index.js",
-		"demoh": "node ./dist/src.es2023.esm/hateoas/index.js"
-	},
 
 	"devDependencies": {
 		"@offirmo-private/monorepo-scripts": "*",
 		"@offirmo-private/prettify-any": "*",
 		"@offirmo-private/soft-execution-context": "*",
+		"@offirmo-private/toolbox--parcel": "*",
 		"@offirmo/unit-test-toolbox": "^9",
-		"npm-run-all": "^4",
-		"tslib": "^2"
+		"npm-run-all": "^4"
 	}
 }

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/browser.ts → stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/terminal/browser.ts

@@ -3,22 +3,9 @@ import { Immutable } from '@offirmo-private/state-utils'
 import { type Hyperlink, type Uri‿str, type URI‿x, type SchemeSpecificURIPart } from '@offirmo-private/ts-types-web'
 import * as RichText from '@offirmo-private/rich-text-format'
 
-import * as AppState from '@tbrpg/state'
-import * as AppRichText from '@tbrpg/ui--rich-text'
-import {
-	Game,
-	type Action,
-	create_action,
-	ActionType,
-	type ActionPlay,
-	type ActionAcknowledgeEngagementMsgSeen,
-} from '@tbrpg/interfaces'
-
-import { prettifyꓽjson } from '../services/misc.js'
+import { prettifyꓽjson } from '../../services/misc.js'
 
-import { ChatPrimitivesConsole } from '@offirmo-private/view--chat/primitives--terminal--vanilla'
 import {
-	create,
 	StepType,
 	type Step,
 	type SelectStep,
@@ -34,9 +21,7 @@ import {
 	normalizeꓽuri‿str,
 	getꓽCTA,
 	type HATEOASServer,
-} from './to-migrate.js'
-
-import { AppHateoasServer } from './server'
+} from '../to-migrate.js'
 
 /////////////////////////////////////////////////
 

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/index.ts → stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/terminal/index.ts

@@ -4,7 +4,7 @@ import { Immutable } from '@offirmo-private/state-utils'
 import { ChatPrimitivesConsole } from '@offirmo-private/view--chat/primitives--terminal--vanilla'
 import { create } from '@offirmo-private/view--chat'
 import { HypermediaBrowserWithChatInterface } from './browser.js'
-import { AppHateoasServer } from './server.js'
+import { AppHateoasServer } from '../server.js'
 
 /////////////////////////////////////////////////
 

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/web/browser.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export default function Root() {
+	return (
+		<>
+			Hello, React world!
+		</>
+	)
+}

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/web/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+</head>
+<body>
+
+<main id="react-root">
+	<!-- React will render here and replace this -->
+	Loading…
+</main>
+
+<script type="module">
+	/* NON-critical JS */
+	import init from './index.tsx'
+	init()
+</script>
+</body>
+</html>

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/hateoas/web/index.tsx

@@ -0,0 +1,40 @@
+import React, { Fragment, StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { getRootSXC } from '@offirmo-private/soft-execution-context'
+import { schedule_when_idle_but_within_human_perception } from '@offirmo-private/async-utils'
+import ErrorBoundary from '@offirmo-private/react-error-boundary'
+import { LIB } from '@tbrpg/definitions'
+
+import { ೱᐧpage_loaded } from '../../to-export-to-own-package/page-loaded/index.tsx'
+
+import Root from './browser.tsx'
+
+/////////////////////////////////////////////////
+
+const StrictCheck = StrictMode
+//const StrictCheck = Fragment
+
+/////////////////////////////////////////////////
+
+async function init(): Promise<void> {
+	getRootSXC().xTry('view', async ({ logger, SXC }) => {
+		console.log('🔄 scheduling React start later…')
+		await ೱᐧpage_loaded
+		await schedule_when_idle_but_within_human_perception(() => {
+			console.log('🔄 now starting view with react…')
+			const root = createRoot(document.getElementById('react-root'))
+			root.render(
+				<StrictCheck>
+					<ErrorBoundary name={`${LIB}ᐧroot`} SXC={SXC}>
+						<Root />
+					</ErrorBoundary>
+				</StrictCheck>
+			)
+		})
+	})
+}
+
+/////////////////////////////////////////////////
+
+export default init

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/to-export-to-own-package/hateoas/types.ts

@@ -0,0 +1,37 @@
+import assert from 'tiny-invariant'
+import { Immutable } from '@offirmo-private/state-utils'
+import {
+	type Hyperlink,
+} from '@offirmo-private/ts-types-web'
+
+/////////////////////////////////////////////////
+
+interface HATEOASServer<
+	HypermediaType, // an advanced Hypermedia format able to contain links and actions
+	Action,
+> {
+	// inspired by GET, POST, PUT, DELETE https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
+	// also QUERY https://www.ietf.org/archive/id/draft-ietf-httpbis-safe-method-w-body-05.html
+
+	// the base one, return a hypermedia representation with hyperlinks/actions
+	get(url: Hyperlink['href']): Promise<HypermediaType>
+
+	// dispatch an action
+	// url TBD
+	// doesn't return (so far) bc the response can be lost and we may want strict feedback to actions
+	// ex. a game where an action triggers an important cutscene, we could return the important cutscene but how would we ensure it has been seen/processed by the player?
+	// ex. crash or lost connexion and the player lose a very important story development.
+	// thus we'd rather use "engagement", see next method.
+	// TODO REVIEW we may want to return trivial, "can-be-lost" feedback, for ex. "ticket created" or "action acknowledged"
+	dispatch(action: Action, url?: Hyperlink['href']): Promise<void>
+
+	// important to separate resource representation from actions feedback
+	// sync bc we assume the browser awaits dispatches
+	get_next_pending_engagement(url?: Hyperlink['href']): [HypermediaType, Action] | null
+}
+
+/////////////////////////////////////////////////
+
+export {
+	type HATEOASServer,
+}

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/src/to-export-to-own-package/page-loaded/index.tsx

@@ -0,0 +1,32 @@
+/* A promise resolved once the page is loaded
+ */
+import Deferred from '@offirmo/deferred'
+
+/////////////////////////////////////////////////
+// page loaded
+// some viewport stuff is not fully resolved until page loaded
+
+// XXX TODO review semantic
+// XXX TODO review DOMContentLoaded vs load
+const ೱᐧpage_loaded = new Deferred<void>()
+
+if (document.readyState === "complete") {
+	// page is already loaded
+	ೱᐧpage_loaded.resolve()
+}
+else {
+	window.addEventListener('DOMContentLoaded', (event) => {
+		//console.log("ೱpage_loaded page load event", event);
+		ೱᐧpage_loaded.resolve()
+	});
+}
+ೱᐧpage_loaded.then(() => console.log("ೱpage_loaded resolved"))
+
+/////////////////////////////////////////////////
+
+
+/////////////////////////////////////////////////
+
+export {
+	ೱᐧpage_loaded,
+}

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/tosort/l4-hypermedia/.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+package-lock=false

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/tosort/l4-hypermedia/.tabset

@@ -0,0 +1 @@
+tabset --badge $1 --color "#FF851B"

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/tosort/l4-hypermedia/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@tbrpg/hypermedia",
+	"version": "0.0.1",
+	"author": "Offirmo <offirmo.net@gmail.com>",
+	"license": "Unlicense",
+	"private": true,
+
+	"sideEffects": false,
+	"type": "module",
+	"source": "src/index.ts",
+	"exports": {
+		".": {
+			"import": "./dist/src.es2023.esm/index.js"
+		}
+	},
+	"module": "dist/src.es2023.esm/index.js",
+	"typings": "dist/src.es2023.esm/index.d.ts",
+
+	"peerDependencies": {
+		"@offirmo-private/soft-execution-context": "*",
+		"tslib": "^2"
+	},
+	"dependencies": {
+		"@offirmo-private/rich-text-format": "^0",
+		"@offirmo-private/state-utils": "*",
+		"@offirmo-private/timestamps": "*",
+		"@offirmo-private/ts-types": "*",
+		"@offirmo-private/view--chat": "*",
+		"@tbrpg/state": "*",
+		"@tbrpg/ui--rich-text": "^0",
+		"tiny-invariant": "^1",
+		"typescript-string-enums": "^1"
+	},
+	"scripts": {
+		"clean": "monorepo-script--clean-package …dist",
+
+		"_build:dev:watch": "monorepo-script--build-typescript-package --watch --module=esm",
+		"dev": "run-s clean _build:dev:watch",
+
+		"demo": "node ./dist/src.es2023.esm/demo/index.js",
+		"demoh": "node ./dist/src.es2023.esm/hateoas/index.js"
+	},
+
+	"devDependencies": {
+		"@offirmo-private/monorepo-scripts": "*",
+		"@offirmo-private/prettify-any": "*",
+		"@offirmo-private/soft-execution-context": "*",
+		"@offirmo/unit-test-toolbox": "^9",
+		"npm-run-all": "^4",
+		"tslib": "^2"
+	}
+}

stack--current/A-apps--core/the-boring-rpg/xx-sandbox/tosort/l4-hypermedia/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../0-meta/tsconfig.json",
+	"compilerOptions": {
+
+	},
+	"include": [
+		"../../../0-meta/typescript-custom-typings/*.d.ts",
+		"src/**/*.ts"
+	]
+}