initial commit: vue, svelte, react components in one page

3 weeks ago · 92a95ec6e7
commit 92a95ec6e7
23 changed files with 6634 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,36 @@
 # dependencies (bun install)
 node_modules
 # output
 out
 dist
 *.tgz
 # code coverage
 coverage
 *.lcov
 # logs
 logs
 _.log
 report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # dotenv environment variable files
 .env
 .env.development.local
 .env.test.local
 .env.production.local
 .env.local
 # caches
 .eslintcache
 .cache
 *.tsbuildinfo
 # IntelliJ based IDEs
 .idea
 # Finder (MacOS) folder config
 .DS_Store
 .astro
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
 # Multi-Framework Signal Proxies
 Thanks for providing the basic multi-framework template:
 https://github.com/aleksadencic/multi-framework-app
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,11 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import vue from "@astrojs/vue";
 import svelte from "@astrojs/svelte";
 // https://astro.build/config
 export default defineConfig({
  integrations: [react(), vue(), svelte()],
  srcDir: "./src/app",
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,31 @@
 {
  "name": "multi-framework-signal-proxies",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@types/react": "19.1.10",
    "@types/react-dom": "19.1.7",
    "astro": "5.13.2",
    "@astrojs/react": "4.3.0",
    "@astrojs/svelte": "7.1.0",
    "@astrojs/vue": "^5.1.0",
    "react": "19.1.1",
    "react-dom": "19.1.1",
    "svelte": "5.38.2",
    "vue": "3.5.19"
  },
  "devDependencies": {
    "@types/node": "24.3.0",
    "@types/react": "19.1.10",
    "@types/react-dom": "19.1.7",
    "vite": "7.1.3"
  }
 }
--- a/src/app/components/Highlight.astro
+++ b/src/app/components/Highlight.astro
@ -0,0 +1,49 @@
 ---
 interface Props {
  react?: boolean;
  svelte?: boolean;
  vue?: boolean;
  astro?: boolean;
 }
 const { react, svelte, vue, astro } = Astro.props;
 const frameworkName = Object.keys(Astro.props)[0];
 ---
 <div class:list={["box", { react, svelte, vue, astro }]}>
  <p class="title">{frameworkName}</p>
  <div class="wrap">
    <slot />
  </div>
 </div>
 <style>
  .box {
    border: 2px solid rgb(88, 88, 81);
    border-radius: 1em;
    padding: 1em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 60%;
  }
  .wrap {
    padding: 10px;
  }
  .title {
    background: var(--highlightColor);
    padding: 0 10px;
  }
  .vue {
    background-color: rgb(255, 212, 255);
  }
  .react {
    background-color: rgb(189, 216, 255);
  }
  .svelte {
    background-color: rgb(255, 216, 189);
  }
 </style>
--- a/src/app/components/ReactRoot.tsx
+++ b/src/app/components/ReactRoot.tsx
@ -0,0 +1,7 @@
 import { HelloWorldReact } from "src/frontends/react/HelloWorld";
 const Root = () => {
  return <HelloWorldReact />;
 };
 export default Root;
--- a/src/app/components/SvelteRoot.svelte
+++ b/src/app/components/SvelteRoot.svelte
@ -0,0 +1,7 @@
 <script lang="ts">
  import HelloWorld from "src/frontends/svelte/HelloWorld.svelte";
  //
 </script>
 <HelloWorld />
--- a/src/app/components/VueRoot.vue
+++ b/src/app/components/VueRoot.vue
@ -0,0 +1,9 @@
 <script setup lang="ts">
 import HelloWorld from 'src/frontends/vue/HelloWorld.vue';
  //
 </script>
 <template>
  <HelloWorld></HelloWorld>
 </template>
--- a/src/app/layouts/Layout.astro
+++ b/src/app/layouts/Layout.astro
@ -0,0 +1,21 @@
 ---
 import Highlight from "../components/Highlight.astro";
 ---
 <!doctype html>
 <html lang="en" data-theme="dark">
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Multi-Framework Signal Experiments</title>
  </head>
  <body>
    <Highlight astro>
      <header class="container">Multi-Framework Signal Experiments</header>
      <main class="container">
        <slot />
      </main>
    </Highlight>
  </body>
 </html>
--- a/src/app/pages/index.astro
+++ b/src/app/pages/index.astro
@ -0,0 +1,24 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Highlight from "../components/Highlight.astro";
 import VueRoot from "../components/VueRoot.vue";
 import ReactRoot from "../components/ReactRoot";
 import SvelteRoot from "../components/SvelteRoot.svelte";
 const title = "Multi-framework app";
 ---
 <Layout title={title}>
  <Highlight vue>
    <VueRoot client:load />
  </Highlight>
  <Highlight react>
    <ReactRoot client:visible />
  </Highlight>
  <Highlight svelte>
    <SvelteRoot client:load />
  </Highlight>
 </Layout>
--- a/src/app/store/state.ts
+++ b/src/app/store/state.ts
@ -0,0 +1,3 @@
 import { atom } from "nanostores";
 export const selectedFilters = atom<string[]>([]);
--- a/src/frontends/objectState.ts
+++ b/src/frontends/objectState.ts
--- a/src/frontends/react/HelloWorld.tsx
+++ b/src/frontends/react/HelloWorld.tsx
@ -0,0 +1,9 @@
 import React from "react";
 export function HelloWorldReact() {
  return (
    <div>
      <p>Hello World from React!</p>
    </div>
  );
 }
--- a/src/frontends/svelte/HelloWorld.svelte
+++ b/src/frontends/svelte/HelloWorld.svelte
@ -0,0 +1,7 @@
 <script>
  // Simple Svelte component
 </script>
 <div>
  <p>Hello World from Svelte!</p>
 </div>
--- a/src/frontends/svelte/mount.ts
+++ b/src/frontends/svelte/mount.ts
@ -0,0 +1,22 @@
 // Simple Svelte-like component using vanilla JS
 export function mountSvelteComponent(element: HTMLElement) {
  // Create the DOM structure that would be created by the Svelte component
  element.innerHTML = `
    <div style="
      padding: 20px; 
      border: 2px solid #000000ff; 
      border-radius: 8px;
      margin: 10px;
      background-color: #fff5f5;
    ">
      <h2>Svelte Component</h2>
      <p>Hello World from Svelte!</p>
    </div>
  `;
  return {
    $destroy: () => {
      element.innerHTML = "";
    },
  };
 }
--- a/src/frontends/vue/HelloWorld.vue
+++ b/src/frontends/vue/HelloWorld.vue
@ -0,0 +1,9 @@
 <template>
  <div>
    <p>Hello World from Vue!</p>
  </div>
 </template>
 <script setup lang="ts">
 // Simple Vue component with composition API
 </script>
--- a/src/frontends/vue/mount.ts
+++ b/src/frontends/vue/mount.ts
@ -0,0 +1,8 @@
 import { createApp } from "vue";
 import HelloworldVue from "./HelloWorld.vue";
 export function mountVueComponent(element: HTMLElement) {
  const app = createApp(HelloworldVue);
  app.mount(element);
  return app;
 }
--- a/src/ng-mock/js-land/connector/connector.ts
+++ b/src/ng-mock/js-land/connector/connector.ts
@ -0,0 +1,4 @@
 // Requires functions
 // - initializeConnection
 // - sendUpdateToDb
 // - onDbUpdate
--- a/src/ng-mock/js-land/connector/ngSignals.ts
+++ b/src/ng-mock/js-land/connector/ngSignals.ts
@ -0,0 +1,2 @@
 // Requires functions
 // - createSignalForShape()
--- a/src/ng-mock/js-land/signalLibs/alienSignals.ts
+++ b/src/ng-mock/js-land/signalLibs/alienSignals.ts
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,5 @@
 import { vitePreprocess } from "@astrojs/svelte";
 export default {
  preprocess: vitePreprocess(),
 };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,8 @@
 {
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": "."
  }
 }
		`@ -0,0 +1,3 @@`
							`import { atom } from "nanostores";`

							`export const selectedFilters = atom<string[]>([]);`
		`@ -0,0 +1,2 @@`
							`// Requires functions`
							`// - createSignalForShape()`