Laurin Weger
2 weeks ago
commit
92a95ec6e7
@ -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 |
||||
@ -0,0 +1,4 @@ |
||||
# Multi-Framework Signal Proxies |
||||
|
||||
Thanks for providing the basic multi-framework template: |
||||
https://github.com/aleksadencic/multi-framework-app |
||||
@ -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", |
||||
}); |
||||
File diff suppressed because it is too large
Load Diff
@ -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" |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -0,0 +1,7 @@ |
||||
import { HelloWorldReact } from "src/frontends/react/HelloWorld"; |
||||
|
||||
const Root = () => { |
||||
return <HelloWorldReact />; |
||||
}; |
||||
|
||||
export default Root; |
||||
@ -0,0 +1,7 @@ |
||||
<script lang="ts"> |
||||
import HelloWorld from "src/frontends/svelte/HelloWorld.svelte"; |
||||
|
||||
// |
||||
</script> |
||||
|
||||
<HelloWorld /> |
||||
@ -0,0 +1,9 @@ |
||||
<script setup lang="ts"> |
||||
import HelloWorld from 'src/frontends/vue/HelloWorld.vue'; |
||||
|
||||
// |
||||
</script> |
||||
|
||||
<template> |
||||
<HelloWorld></HelloWorld> |
||||
</template> |
||||
@ -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> |
||||
@ -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> |
||||
@ -0,0 +1,3 @@ |
||||
import { atom } from "nanostores"; |
||||
|
||||
export const selectedFilters = atom<string[]>([]); |
||||
@ -0,0 +1,9 @@ |
||||
import React from "react"; |
||||
|
||||
export function HelloWorldReact() { |
||||
return ( |
||||
<div> |
||||
<p>Hello World from React!</p> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
<script> |
||||
// Simple Svelte component |
||||
</script> |
||||
|
||||
<div> |
||||
<p>Hello World from Svelte!</p> |
||||
</div> |
||||
@ -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 = ""; |
||||
}, |
||||
}; |
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
// Requires functions
|
||||
// - initializeConnection
|
||||
// - sendUpdateToDb
|
||||
// - onDbUpdate
|
||||
@ -0,0 +1,2 @@ |
||||
// Requires functions
|
||||
// - createSignalForShape()
|
||||
@ -0,0 +1,5 @@ |
||||
import { vitePreprocess } from "@astrojs/svelte"; |
||||
|
||||
export default { |
||||
preprocess: vitePreprocess(), |
||||
}; |
||||
@ -0,0 +1,8 @@ |
||||
{ |
||||
"extends": "astro/tsconfigs/strict", |
||||
"compilerOptions": { |
||||
"jsx": "react-jsx", |
||||
"jsxImportSource": "react", |
||||
"baseUrl": "." |
||||
} |
||||
} |
||||
Loading…
Reference in new issue