Compare commits

...

10 Commits

35 changed files with 20091 additions and 58 deletions

3
.gitignore vendored
View File

@@ -1 +1,4 @@
tmp
server
dist
index.html

View File

@@ -5,13 +5,67 @@ nil:
reactNextJS/out/*: reactNextJS/app/* reactNextJS/*.js reactNextJS/*.json
cd reactNextJS && npm install && npm run build
nextjs: reactNextJS/out/*
serverdeps: nextjs *.go reactNextJS/addToServer.go
cleanNext:
rm -rf reactNextJS/out
build: serverdeps
vuejs/dist/*: vuejs/src/*
cd vuejs && npm install && npm run build
vuejs: vuejs/dist/*
cleanVue:
rm -rf ./vuejs/dist
svelte/dist/*: svelte/src/*
cd svelte && npm install && npm run build
svelte: svelte/dist/*
cleanSvelte:
rm -rf ./svelte/dist
reactNative/dist/*: ./reactNative/*
cd reactNative && npm install && npm run export
reactNative: reactNative/dist/*
cleanReactNative:
rm -rf ./reactNative/dist
cleandist:
rm -rf dist
dist:
mkdir -p dist
dist/vanillaJS: dist vanillaJS/index.html
rm -rf dist/vanillaJS && \
cp -r ./vanillaJS ./dist/vanillaJS
dist/react: dist react/index.html
rm -rf dist/react && \
cp -r ./react ./dist/react
dist/alpinejs: dist alpinejs/index.html
rm -rf dist/alpinejs && \
cp -r ./alpinejs ./dist/alpinejs
dist/reactNextJS: dist reactNextJS/out/*
rm -rf ./dist/reactNextJS && \
cp -r ./reactNextJS/out ./dist/reactNextJS
dist/vuejs: dist vuejs/dist/*
rm -rf ./dist/vuejs && \
cp -r ./vuejs/dist ./dist/vuejs
dist/svelte: dist svelte/dist/*
rm -rf ./dist/svelte && \
cp -r ./svelte/dist ./dist/svelte
dist/index.html: dist index.tmpl
go run server.go generate
mv index.html dist/
dist/reactNative: dist reactNative/dist/*
rm -rf ./dist/reactNative && \
cp -r ./reactNative/dist ./dist/reactNative
export: dist/vanillaJS dist/react dist/alpinejs dist/reactNextJS dist/vuejs dist/svelte dist/index.html dist/reactNative
web: ./reactNative/dist/* ./svelte/dist/* ./vuejs/dist/* ./reactNextJS/out/* vanillaJS/index.html react/index.html alpinejs/index.html
build: web server.go
go build server.go
run: serverdeps
run: web server.go
go run server.go
air: nextjs nil
air: nil web server.go
air server.go
clean: cleanNext cleanVue cleanSvelte cleandist
rm -rf tmp
rm -f server
rm -f index.html
.PHONY: all build nextjs serverdeps run air nil
.PHONY: all build clean cleanbuild nextjs vuejs svelte run air nil web export

View File

@@ -1,9 +0,0 @@
<html>
<body>
<h1>Frontends</h1>
<ul>
<li><a href="react/index.html">React</a></li>
<li><a href="vanillaJS/index.html">vanillaJS</a></li>
</ul>
</body>
</html>

10
index.tmpl Normal file
View File

@@ -0,0 +1,10 @@
<html>
<body>
<h1>Frontends</h1>
<ul>
{{range .}}
<li><a href="{{.Mountpoint}}">{{.Name}}</a></li>
{{end}}
</ul>
</body>
</html>

20
reactNative/.gitignore vendored Normal file
View File

@@ -0,0 +1,20 @@
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# macOS
.DS_Store
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
# The following patterns were generated by expo-cli
expo-env.d.ts
# @end expo-cli

40
reactNative/README.md Normal file
View File

@@ -0,0 +1,40 @@
# Welcome to your Expo app 👋
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
## Get started
1. Install dependencies
```bash
npm install
```
2. Start the app
```bash
npx expo start
```
In the output, you'll find options to open the app in a
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
## Learn more
To learn more about developing your project with Expo, look at the following resources:
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
## Join the community
Join our community of developers creating universal apps.
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

37
reactNative/app.json Normal file
View File

@@ -0,0 +1,37 @@
{
"expo": {
"name": "reactNativeApp",
"slug": "reactNativeApp",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router"
],
"experiments": {
"typedRoutes": true,
"baseUrl": "/reactNative"
}
}
}

View File

@@ -0,0 +1,9 @@
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="index" options={{ title:'Hello World!'}}/>
</Stack>
);
}

33
reactNative/app/index.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Text, View, Button, ScrollView } from "react-native";
import React, {useState} from 'react';
import { ThemedText } from "@/components/ThemedText"
import Blurb, {BlurbData} from "@/components/Blurb"
const default_blurb: BlurbData = {
title: "Fart Man Comes To Town!",
blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
};
export default function Index() {
const [blurbs, setBlurbs] = useState([default_blurb])
return (
<ScrollView
contentContainerStyle={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
{blurbs.map((blurb, i) => (
<Blurb key={i} {...blurb} />
))}
<Button
onPress={() => {
setBlurbs(blurbs.concat([default_blurb]));
}}
title="Load More"
/>
</ScrollView>
);
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@@ -0,0 +1,6 @@
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};

View File

@@ -0,0 +1,31 @@
import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
type BlurbData = {
title: string;
blurb: string;
}
const Blurb = (props: BlurbData) => {
return(
<Text style={styles.baseText}>
<Text style={styles.titleText}>{props.title}</Text>
{'\n'}
{props.blurb}
{'\n'}
{'\n'}
</Text>
);
}
export default Blurb;

View File

@@ -0,0 +1,26 @@
/**
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
tabIconSelected: tintColorDark,
},
};

View File

@@ -0,0 +1 @@
export { useColorScheme } from 'react-native';

View File

@@ -0,0 +1,8 @@
// NOTE: The default React Native styling doesn't support server rendering.
// Server rendered styles should not change between the first render of the HTML
// and the first render on the client. Typically, web developers will use CSS media queries
// to render different styles on the client and server, these aren't directly supported in React Native
// but can be achieved using a styling library like Nativewind.
export function useColorScheme() {
return 'light';
}

View File

@@ -0,0 +1,22 @@
/**
* Learn more about light and dark modes:
* https://docs.expo.dev/guides/color-schemes/
*/
import { useColorScheme } from 'react-native';
import { Colors } from '@/constants/Colors';
export function useThemeColor(
props: { light?: string; dark?: string },
colorName: keyof typeof Colors.light & keyof typeof Colors.dark
) {
const theme = useColorScheme() ?? 'light';
const colorFromProps = props[theme];
if (colorFromProps) {
return colorFromProps;
} else {
return Colors[theme][colorName];
}
}

19570
reactNative/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

49
reactNative/package.json Normal file
View File

@@ -0,0 +1,49 @@
{
"name": "reactnativeapp",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"export": "expo export",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.0",
"@react-navigation/native": "^6.0.2",
"expo": "~51.0.14",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.7",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.16",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.6",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.2",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.1",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"private": true
}

View File

@@ -0,0 +1,73 @@
#!/usr/bin/env node
/**
* This script is used to reset the project to a blank state.
* It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
* You can remove the `reset-project` script from package.json and safely delete this file after running it.
*/
const fs = require('fs');
const path = require('path');
const root = process.cwd();
const oldDirPath = path.join(root, 'app');
const newDirPath = path.join(root, 'app-example');
const newAppDirPath = path.join(root, 'app');
const indexContent = `import { Text, View } from "react-native";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/index.tsx to edit this screen.</Text>
</View>
);
}
`;
const layoutContent = `import { Stack } from "expo-router";
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="index" />
</Stack>
);
}
`;
fs.rename(oldDirPath, newDirPath, (error) => {
if (error) {
return console.error(`Error renaming directory: ${error}`);
}
console.log('/app moved to /app-example.');
fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
if (error) {
return console.error(`Error creating new app directory: ${error}`);
}
console.log('New /app directory created.');
const indexPath = path.join(newAppDirPath, 'index.tsx');
fs.writeFile(indexPath, indexContent, (error) => {
if (error) {
return console.error(`Error creating index.tsx: ${error}`);
}
console.log('app/index.tsx created.');
const layoutPath = path.join(newAppDirPath, '_layout.tsx');
fs.writeFile(layoutPath, layoutContent, (error) => {
if (error) {
return console.error(`Error creating _layout.tsx: ${error}`);
}
console.log('app/_layout.tsx created.');
});
});
});
});

17
reactNative/tsconfig.json Normal file
View File

@@ -0,0 +1,17 @@
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"paths": {
"@/*": [
"./*"
]
}
},
"include": [
"**/*.ts",
"**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts"
]
}

View File

@@ -1,28 +0,0 @@
package reactNextJS
import (
"embed"
"fmt"
"io/fs"
"net/http"
)
//go:embed "out/*"
var nextFiles embed.FS
//go:embed "out/_next"
var nextScripts embed.FS
// Call this from main once before starting the server
func AddNextStaticClient() {
scriptsSubFolder, err := fs.Sub(nextScripts, "out")
if err != nil {
panic(fmt.Sprint("Error: Could not find \"reactNextJS/out/\". Did you build the reactNextJS client?"))
}
filesSubFolder, _ := fs.Sub(nextFiles, "out")
var nextScriptsServer = http.FileServerFS(scriptsSubFolder)
var nextFilesServer = http.FileServerFS(filesSubFolder)
http.Handle("/reactNextJS/", http.StripPrefix("/reactNextJS/", nextFilesServer))
http.Handle("/_next/", nextScriptsServer)
}

View File

@@ -3,6 +3,7 @@
*/
const nextConfig = {
output: 'export',
basePath: '/reactNextJS',
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
// trailingSlash: true,

View File

@@ -3,32 +3,90 @@ package main
import (
"embed"
"fmt"
"frontends/reactNextJS"
"html/template"
"io/fs"
"net/http"
"os"
)
const PORT = 3003
//go:embed "all:vuejs/dist"
var vueFiles embed.FS
//go:embed "all:reactNextJS/out"
var nextFiles embed.FS
//go:embed "all:svelte/dist"
var svelteFiles embed.FS
//go:embed "vanillaJS"
var vanillaJS embed.FS
//go:embed "react"
var react embed.FS
//go:embed "reactNextJS/out"
var nextStatic embed.FS
var vanillaFiles embed.FS
//go:embed "alpinejs"
var alpinejs embed.FS
var alpineFiles embed.FS
//go:embed "react"
var reactFiles embed.FS
//go:embed "all:reactNative/dist"
var reactNativeFiles embed.FS
type frontendInfo struct {
Name, Mountpoint string
Filesystem fs.FS
}
var frontends = []frontendInfo{
{"JS Only", "/vanillaJS/", getSubFS(vanillaFiles, "vanillaJS")},
{"Alpine.js", "/alpinejs/", getSubFS(alpineFiles, "alpinejs")},
{"React", "/react/", getSubFS(reactFiles, "react")},
{"React (Next)", "/reactNextJS/", getSubFS(nextFiles, "reactNextJS/out")},
{"React Native", "/reactNative/", getSubFS(reactNativeFiles, "reactNative/dist")},
{"Vue.js", "/vuejs/", getSubFS(vueFiles, "vuejs/dist")},
{"Svelte", "/svelte/", getSubFS(svelteFiles, "svelte/dist")},
}
func getSubFS(f fs.FS, dir string) fs.FS {
files, err := fs.Sub(f, dir)
if err != nil {
panic(err)
}
return files
}
func outputIndexAndExit(indexTemplate template.Template, frontends []frontendInfo) {
file, err := os.OpenFile("index.html", os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
if err != nil {
panic(err) // Handle error
}
indexTemplate.Execute(file, frontends)
file.Close()
os.Exit(0)
}
func main() {
args := os.Args
http.Handle("/vanillaJS/", http.FileServerFS(vanillaJS))
http.Handle("/react/", http.FileServerFS(react))
http.Handle("/alpinejs/", http.FileServerFS(alpinejs))
reactNextJS.AddNextStaticClient()
home_template, err := template.ParseFiles("index.tmpl")
if err != nil {
panic(fmt.Sprintf("Error parsing homepage template\n%s", err))
}
err := http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil)
if len(args) == 2 && args[1] == "generate" {
outputIndexAndExit(*home_template, frontends)
}
for _, info := range frontends {
fileServer := http.FileServerFS(info.Filesystem)
http.Handle(info.Mountpoint, http.StripPrefix(info.Mountpoint, fileServer))
}
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
err = home_template.Execute(w, frontends)
})
err = http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil)
if err != nil {
panic(fmt.Sprintf("Error starting server: %s", err))
}

View File

@@ -1,6 +1,6 @@
<script>
import svelteLogo from './assets/svelte.svg'
import viteLogo from '/vite.svg'
import viteLogo from './assets/vite.svg'
import Counter from './lib/Counter.svelte'
import Blurb from './lib/Blurb.svelte';

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -4,4 +4,5 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
base: '/svelte/'
})

View File

@@ -14,5 +14,6 @@ export default defineConfig({
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
},
base: '/vuejs/'
})