@oceanum/eidos 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/index.html +13 -0
- package/package.json +20 -0
- package/project.json +4 -0
- package/public/favicon.ico +0 -0
- package/scripts/debug-schema.js +30 -0
- package/scripts/generate-interfaces.js +48 -0
- package/scripts/schema-bundler.js +609 -0
- package/scripts/schema-to-typescript.js +604 -0
- package/src/index.ts +3 -0
- package/src/lib/eidosmodel.ts +46 -0
- package/src/lib/react.tsx +8 -0
- package/src/lib/render.ts +86 -0
- package/src/schema/interfaces.ts +1157 -0
- package/test-example.js +64 -0
- package/tsconfig.json +13 -0
- package/tsconfig.lib.json +25 -0
- package/tsconfig.spec.json +31 -0
- package/vite.config.ts +44 -0
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# EIDOS JavaScript Bindings
|
|
2
|
+
|
|
3
|
+
A lightweight, reactive JavaScript library for embedding and controlling EIDOS visualizations in web applications. Built with Valtio for natural object mutations and AJV for comprehensive schema validation.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🚀 **Natural API**: Mutate EIDOS specs using standard JavaScript object assignment
|
|
8
|
+
- ⚡ **Reactive Updates**: Changes automatically propagate to the renderer via JSON patches
|
|
9
|
+
- 🔍 **Schema Validation**: Comprehensive validation using AJV with detailed error messages
|
|
10
|
+
- 🎯 **Framework Agnostic**: Works with React, Vue, Svelte, and vanilla JavaScript
|
|
11
|
+
- 📦 **Lightweight**: Small bundle size with efficient reactivity
|
|
12
|
+
- 🔒 **Type Safe**: Full TypeScript support
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
|
|
16
|
+
### Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @oceanum/eidos
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Basic Usage
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
import { embed } from "@oceanum/eidos";
|
|
26
|
+
|
|
27
|
+
// Define your EIDOS specification
|
|
28
|
+
const spec = {
|
|
29
|
+
id: "my-app",
|
|
30
|
+
name: "My Visualization",
|
|
31
|
+
root: {
|
|
32
|
+
id: "root",
|
|
33
|
+
nodeType: "world",
|
|
34
|
+
children: [],
|
|
35
|
+
},
|
|
36
|
+
data: [],
|
|
37
|
+
transforms: [],
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// Embed in a container element
|
|
41
|
+
const container = document.getElementById("eidos-container");
|
|
42
|
+
const eidos = await embed(container, spec, (event) => {
|
|
43
|
+
console.log("Received event:", event);
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// Mutate the spec naturally - changes propagate automatically
|
|
47
|
+
eidos.name = "Updated Visualization";
|
|
48
|
+
eidos.root.children.push({
|
|
49
|
+
id: "layer-1",
|
|
50
|
+
nodeType: "worldlayer",
|
|
51
|
+
layerType: "track",
|
|
52
|
+
});
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Framework Integration
|
|
56
|
+
|
|
57
|
+
- [React Integration](./docs/eidos/react.md) - Hooks, components, and patterns
|
|
58
|
+
- [Vue.js Integration](./docs/eidos/vue.md) - Composition API and component examples
|
|
59
|
+
- [Svelte Integration](./docs/eidos/svelte.md) - Stores and reactive patterns
|
|
60
|
+
- [Vanilla JavaScript](./docs/eidos/vanilla.md) - Pure JavaScript examples
|
|
61
|
+
|
|
62
|
+
## API Reference
|
|
63
|
+
|
|
64
|
+
- [Core API](./docs/eidos/api.md) - Complete API documentation
|
|
65
|
+
- [Events](./docs/eidos/events.md) - Event handling and communication
|
|
66
|
+
- [Validation](./docs/eidos/validation.md) - Schema validation details
|
|
67
|
+
|
|
68
|
+
## Examples
|
|
69
|
+
|
|
70
|
+
Check out the [examples directory](./examples/) for complete working examples in different frameworks.
|
|
71
|
+
|
|
72
|
+
## Contributing
|
|
73
|
+
|
|
74
|
+
This library is part of the [oceanum-js](https://github.com/oceanum-io/oceanum-js) project. Please see the main repository for contribution guidelines.
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT License - see the main [oceanum-js](https://github.com/oceanum-io/oceanum-js) repository for details.
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>EIDOS demo</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.ts"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@oceanum/eidos",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.9.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"generate-types": "node ./scripts/generate-interfaces.js"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"ajv": "^8.17.1",
|
|
12
|
+
"valtio": "^2.1.5"
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"json-schema-to-typescript": "^15.0.4"
|
|
16
|
+
},
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"react": "^19.1.0"
|
|
19
|
+
}
|
|
20
|
+
}
|
package/project.json
ADDED
|
Binary file
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { bundle } from "./schema-bundler.js";
|
|
4
|
+
|
|
5
|
+
async function debugSchema() {
|
|
6
|
+
try {
|
|
7
|
+
const schema = await bundle('https://schemas.oceanum.io/eidos/root.json');
|
|
8
|
+
|
|
9
|
+
// Log all $defs keys to check what's available
|
|
10
|
+
console.log("All $defs keys:");
|
|
11
|
+
console.log(Object.keys(schema.$defs));
|
|
12
|
+
|
|
13
|
+
// Check for PlotSpec specifically
|
|
14
|
+
console.log("\nPlotSpec exists:", schema.$defs.hasOwnProperty("PlotSpec"));
|
|
15
|
+
if (schema.$defs.PlotSpec) {
|
|
16
|
+
console.log("PlotSpec definition:");
|
|
17
|
+
console.log(JSON.stringify(schema.$defs.PlotSpec, null, 2));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Check for the root schema
|
|
21
|
+
console.log("\nRoot schema properties:");
|
|
22
|
+
const { $defs, ...rootSchema } = schema;
|
|
23
|
+
console.log(Object.keys(rootSchema));
|
|
24
|
+
console.log(JSON.stringify(rootSchema, null, 2));
|
|
25
|
+
} catch (error) {
|
|
26
|
+
console.error("Error:", error);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
debugSchema();
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { convertToTypeScript } from "./schema-to-typescript.js";
|
|
4
|
+
import path from "path";
|
|
5
|
+
import { fileURLToPath } from "url";
|
|
6
|
+
|
|
7
|
+
// ES6 equivalent of __dirname
|
|
8
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
9
|
+
const __dirname = path.dirname(__filename);
|
|
10
|
+
|
|
11
|
+
class EidosInterfaceGenerator {
|
|
12
|
+
constructor() {
|
|
13
|
+
this.schemasUrl = "https://schemas.oceanum.io/eidos";
|
|
14
|
+
this.outputDir = path.resolve(__dirname, "../src/schema");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
async generate() {
|
|
18
|
+
console.log("🚀 Generating TypeScript interfaces from EIDOS schemas...");
|
|
19
|
+
|
|
20
|
+
try {
|
|
21
|
+
// Determine the root schema URL
|
|
22
|
+
const rootSchemaPath = `${this.schemasUrl}/root.json`;
|
|
23
|
+
|
|
24
|
+
console.log(`📥 Using root schema: ${rootSchemaPath}`);
|
|
25
|
+
|
|
26
|
+
// Use our custom schema-to-typescript converter
|
|
27
|
+
await convertToTypeScript(rootSchemaPath);
|
|
28
|
+
|
|
29
|
+
console.log("✅ Interface generation completed successfully!");
|
|
30
|
+
console.log(`📄 Generated: ${path.relative(process.cwd(), path.join(this.outputDir, "interfaces.ts"))}`);
|
|
31
|
+
} catch (error) {
|
|
32
|
+
console.error("❌ Error generating interfaces:", error);
|
|
33
|
+
process.exit(1);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Run the generator if this is the main module in ES6
|
|
39
|
+
if (
|
|
40
|
+
import.meta.url === `file://${process.argv[1]}` ||
|
|
41
|
+
import.meta.url.endsWith(process.argv[1])
|
|
42
|
+
) {
|
|
43
|
+
const generator = new EidosInterfaceGenerator();
|
|
44
|
+
generator.generate().catch((error) => {
|
|
45
|
+
console.error("Fatal error:", error);
|
|
46
|
+
process.exit(1);
|
|
47
|
+
});
|
|
48
|
+
}
|