From c95c8e58d54578f28fe79936a963136f820953e1 Mon Sep 17 00:00:00 2001
From: HexaField <10372036+HexaField@users.noreply.github.com>
Date: Sat, 30 Aug 2025 11:17:07 +1000
Subject: [PATCH 1/5] trying to build flux plugin
---
flux/.gitignore | 21 ++++++++++++
flux/README | 45 +++++++++++++++++++++++++
flux/globals.d.ts | 2 ++
flux/index.html | 48 +++++++++++++++++++++++++++
flux/package.json | 66 ++++++++++++++++++++++++++++++++++++
flux/src/App.tsx | 81 +++++++++++++++++++++++++++++++++++++++++++++
flux/src/main.ts | 15 +++++++++
flux/tsconfig.json | 16 +++++++++
flux/vite.config.ts | 35 ++++++++++++++++++++
9 files changed, 329 insertions(+)
create mode 100644 flux/.gitignore
create mode 100644 flux/README
create mode 100644 flux/globals.d.ts
create mode 100644 flux/index.html
create mode 100644 flux/package.json
create mode 100644 flux/src/App.tsx
create mode 100644 flux/src/main.ts
create mode 100644 flux/tsconfig.json
create mode 100644 flux/vite.config.ts
diff --git a/flux/.gitignore b/flux/.gitignore
new file mode 100644
index 0000000..286b096
--- /dev/null
+++ b/flux/.gitignore
@@ -0,0 +1,21 @@
+node_modules
+dist
+package-lock.json
+
+# Log files
+*.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.turbo
+dev-dist
+vite.config.ts.timestamp*
+
+cachedb
+yarn.lock
\ No newline at end of file
diff --git a/flux/README b/flux/README
new file mode 100644
index 0000000..7cdf286
--- /dev/null
+++ b/flux/README
@@ -0,0 +1,45 @@
+# Flux Preact Starter Template
+
+## About
+
+This starter template includes everything you need to make an app for Flux.
+
+Dependencies:
+
+- ad4m
+- ad4m-connect
+- ad4m-elements
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+```
+
+## Development
+
+```bash
+# yarn
+yarn dev
+
+# npm
+npm dev
+```
+
+## Production
+
+```bash
+# yarn
+yarn build
+
+# npm
+npm build
+```
+
+The output of the build will end up in `dist/main.js`. This build will output a web component that can be published on npm by running `npm run release`.
diff --git a/flux/globals.d.ts b/flux/globals.d.ts
new file mode 100644
index 0000000..0c2251c
--- /dev/null
+++ b/flux/globals.d.ts
@@ -0,0 +1,2 @@
+declare module "*.module.css";
+declare module "*?worker&inline";
diff --git a/flux/index.html b/flux/index.html
new file mode 100644
index 0000000..3ffe4e3
--- /dev/null
+++ b/flux/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Flux App
+
+
+
+
+
+
+
+
+
+
diff --git a/flux/package.json b/flux/package.json
new file mode 100644
index 0000000..6a8009a
--- /dev/null
+++ b/flux/package.json
@@ -0,0 +1,66 @@
+{
+ "name": "@hexafield/conjure-flux",
+ "version": "0.0.1",
+ "fluxapp": {
+ "name": "Conjure",
+ "description": "Immersive Collaboration",
+ "icon": "conjure"
+ },
+ "workspaces": [],
+ "keywords": [
+ "flux-plugin",
+ "ad4m-view",
+ "conjure"
+ ],
+ "type": "module",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/main.umd.cjs",
+ "module": "./dist/main.js",
+ "exports": {
+ ".": {
+ "import": "./dist/main.js",
+ "require": "./dist/main.umd.cjs"
+ }
+ },
+ "scripts": {
+ "start": "vite",
+ "dev": "vite",
+ "build": "vite build",
+ "link-flux": "yarn link @coasys/flux-api @coasys/flux-constants @coasys/flux-container @coasys/flux-editor @coasys/flux-react-web @coasys/flux-types @coasys/flux-ui @coasys/flux-utils",
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "publish-package": "npm publish"
+ },
+ "author": "",
+ "license": "ISC",
+ "description": "",
+ "peerDependencies": {
+ "@ir-engine/spatial": "workspace:*",
+ "@ir-engine/engine": "workspace:*",
+ "@ir-engine/ecs": "workspace:*",
+ "@ir-engine/hyperflux": "workspace:*"
+ },
+ "dependencies": {
+ "@coasys/ad4m": "0.10.1-release-candidate-4",
+ "@coasys/ad4m-react-hooks": "0.10.1-release-candidate-4",
+ "@coasys/flux-api": "0.10.1-rc3",
+ "@coasys/flux-constants": "0.10.1-rc3",
+ "@coasys/flux-container": "0.10.1-rc3",
+ "@coasys/flux-editor": "0.10.1-rc3",
+ "@coasys/flux-react-web": "0.10.1-rc3",
+ "@coasys/flux-types": "0.10.1-rc3",
+ "@coasys/flux-ui": "0.10.1-rc3",
+ "@coasys/flux-utils": "0.10.1-rc3",
+ "preact": "^10.13.1",
+ "react": "^18.0.2",
+ "react-virtuoso": "^4.3.6"
+ },
+ "devDependencies": {
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
+ "@babel/plugin-proposal-decorators": "^7.21.0",
+ "@preact/preset-vite": "^2.5.0",
+ "vite": "^4.3.5",
+ "vite-plugin-css-injected-by-js": "^3.1.0"
+ }
+}
diff --git a/flux/src/App.tsx b/flux/src/App.tsx
new file mode 100644
index 0000000..e97e43f
--- /dev/null
+++ b/flux/src/App.tsx
@@ -0,0 +1,81 @@
+import { PerspectiveProxy } from '@coasys/ad4m'
+import { AgentClient } from '@coasys/ad4m/lib/src/agent/AgentClient'
+import { Profile } from '@coasys/flux-types'
+import { EngineState } from '@ir-engine/ecs'
+import { createHyperStore, getMutableState, useMutableState, UserID } from '@ir-engine/hyperflux'
+import { ReferenceSpaceState } from '@ir-engine/spatial'
+import { useSpatialEngine } from '@ir-engine/spatial/src/initializeEngine'
+import { useEngineCanvas } from '@ir-engine/spatial/src/renderer/functions/useEngineCanvas'
+import { useEffect, useRef, useState } from 'react'
+import { useBasicScene } from '../../src/world/BasicScene'
+import { useSpawnAvatar } from '../../src/world/useSpawnAvatar'
+
+createHyperStore()
+
+type Props = {
+ agent: AgentClient
+ perspective: PerspectiveProxy
+ source: string
+ threaded: string
+ element: HTMLElement
+ getProfile: (did: string) => Promise
+}
+
+const Scene = (props: { url: string }) => {
+ useBasicScene(props.url)
+ useSpawnAvatar(props.url)
+ return null
+}
+
+const Engine = (props: Props) => {
+ const ref = useRef()
+
+ useSpatialEngine()
+ useEngineCanvas(ref)
+
+ const viewerEntity = useMutableState(ReferenceSpaceState).viewerEntity.value
+
+ return (
+ <>
+
+ {viewerEntity && }
+
+ )
+}
+
+export default function App({ agent, perspective, source, threaded, element, getProfile }: Props) {
+ if (!perspective?.uuid || !agent) return "No perspective or agent client"
+
+ const [ready, setReady] = useState(false)
+
+ useEffect(() => {
+ if (!agent) return
+ agent.me().then((me) => {
+ setReady(true)
+ getMutableState(EngineState).userID.set(me.did as UserID)
+ })
+ }, [])
+
+ return (
+
+ {ready && (
+
+ )}
+
+ )
+}
diff --git a/flux/src/main.ts b/flux/src/main.ts
new file mode 100644
index 0000000..21f6c7c
--- /dev/null
+++ b/flux/src/main.ts
@@ -0,0 +1,15 @@
+import Editor from "@coasys/flux-editor";
+import { toCustomElement } from '@coasys/flux-react-web'
+import '@coasys/flux-ui/dist/main.d.ts'
+import "preact/debug";
+import App from './App'
+
+if (!customElements.get("flux-editor")) {
+ customElements.define("flux-editor", Editor);
+}
+
+const CustomElement: HTMLElement = toCustomElement(App, ['perspective', 'agent', 'source', 'threaded', 'getProfile'], {
+ shadow: false
+})
+
+export default CustomElement
diff --git a/flux/tsconfig.json b/flux/tsconfig.json
new file mode 100644
index 0000000..7f35771
--- /dev/null
+++ b/flux/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compilerOptions": {
+ "jsx": "preserve",
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "baseUrl": "/",
+ "paths": {
+ "react": ["node_modules/preact/compat"],
+ "react-dom": ["node_modules/preact/compat"]
+ }
+ },
+ "include": ["./globals.d.ts", "src/**/*.tsx", "src/**/*.ts", "../src/**/*"]
+}
+
diff --git a/flux/vite.config.ts b/flux/vite.config.ts
new file mode 100644
index 0000000..16215b2
--- /dev/null
+++ b/flux/vite.config.ts
@@ -0,0 +1,35 @@
+import preact from '@preact/preset-vite'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+export default defineConfig({
+ plugins: [
+ preact({
+ babel: {
+ plugins: [['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-class-properties']]
+ }
+ }),
+ ,
+ cssInjectedByJsPlugin()
+ ],
+ build: {
+ lib: {
+ entry: resolve(__dirname, './src/main.ts'),
+ name: 'Main',
+ fileName: 'main'
+ }
+ },
+ // esbuild: {
+ // jsxFactory: 'h',
+ // jsxFragment: 'Fragment',
+ // jsxInject: `import { h, Fragment } from 'preact';`
+ // },
+ resolve: {
+ alias: {
+ react: 'preact/compat',
+ 'react-dom': 'preact/compat', // Must be below test-utils
+ 'react/jsx-runtime': 'preact/jsx-runtime'
+ }
+ }
+})
From 2612d309dab062198da93ba6eb420d2a6926f979 Mon Sep 17 00:00:00 2001
From: HexaField <10372036+HexaField@users.noreply.github.com>
Date: Wed, 3 Sep 2025 15:36:28 +1000
Subject: [PATCH 2/5] redo
---
flux/README | 46 +-
flux/globals.d.ts | 1 -
flux/index.html | 15 +-
flux/package.json | 41 +-
flux/src/App.tsx | 11 +-
flux/src/main.ts | 12 +-
flux/tsconfig.json | 13 +-
flux/vite.config.ts | 48 +-
flux/yarn.lock | 3009 +++++++++++++++++++++++++++++++++++++++++++
9 files changed, 3070 insertions(+), 126 deletions(-)
create mode 100644 flux/yarn.lock
diff --git a/flux/README b/flux/README
index 7cdf286..6ec7cc8 100644
--- a/flux/README
+++ b/flux/README
@@ -1,45 +1,17 @@
-# Flux Preact Starter Template
+# Create Flux Plugin
-## About
+Bootstrap a new [Flux](https://fluxsocial.io) plugin for your community.
-This starter template includes everything you need to make an app for Flux.
+[Documentation](https://docs.fluxsocial.io/create-flux-plugin/getting-started/introduction.html)
-Dependencies:
+Install deps and start building:
-- ad4m
-- ad4m-connect
-- ad4m-elements
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# yarn
-yarn install
-
-# npm
+```bash [npm]
+cd [plugin-name]
npm install
+npm run dev
```
-## Development
-
-```bash
-# yarn
-yarn dev
-
-# npm
-npm dev
-```
-
-## Production
-
-```bash
-# yarn
-yarn build
-
-# npm
-npm build
-```
+## Prerequisites
-The output of the build will end up in `dist/main.js`. This build will output a web component that can be published on npm by running `npm run release`.
+Flux runs on top of [AD4M](https://ad4m.dev), a p2p framework where all data is stored and shared. In order to build a new Flux app you need to [download](https://ad4m.dev/download) and install AD4M.
diff --git a/flux/globals.d.ts b/flux/globals.d.ts
index 0c2251c..1eabbb4 100644
--- a/flux/globals.d.ts
+++ b/flux/globals.d.ts
@@ -1,2 +1 @@
declare module "*.module.css";
-declare module "*?worker&inline";
diff --git a/flux/index.html b/flux/index.html
index 3ffe4e3..51d5739 100644
--- a/flux/index.html
+++ b/flux/index.html
@@ -22,27 +22,20 @@
}
flux-app {
height: 100%;
- max-height: 100vh;
- overflow-y: auto;
display: block;
- box-sizing: border-box;
}
-
+
-
+