Compare commits
7 Commits
5a70b50a6e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 9721c024ff | |||
| b4010cedd8 | |||
| e41ca163a5 | |||
| 03e5a27b4e | |||
| 1b760329ef | |||
| 86eac30d5e | |||
| dbe49ef82b |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +1,4 @@
|
|||||||
tmp
|
tmp
|
||||||
server
|
server
|
||||||
|
dist
|
||||||
|
index.html
|
||||||
|
|||||||
73
Makefile
73
Makefile
@@ -20,47 +20,52 @@ svelte: svelte/dist/*
|
|||||||
cleanSvelte:
|
cleanSvelte:
|
||||||
rm -rf ./svelte/dist
|
rm -rf ./svelte/dist
|
||||||
|
|
||||||
cleanbuild:
|
reactNative/dist/*: ./reactNative/*
|
||||||
rm -rf tmp/build
|
cd reactNative && npm install && npm run export
|
||||||
tmp/build: cleanbuild
|
reactNative: reactNative/dist/*
|
||||||
mkdir -p tmp/build
|
cleanReactNative:
|
||||||
tmp/build/vanillaJS: tmp/build vanillaJS/index.html
|
rm -rf ./reactNative/dist
|
||||||
mkdir tmp/build/vanillaJS && \
|
|
||||||
cp ./vanillaJS/index.html ./tmp/build/vanillaJS
|
|
||||||
tmp/build/react: tmp/build react/index.html
|
|
||||||
mkdir tmp/build/react && \
|
|
||||||
cp ./react/index.html ./tmp/build/react/
|
|
||||||
tmp/build/alpinejs: alpinejs/index.html
|
|
||||||
mkdir tmp/build/alpinejs && \
|
|
||||||
cp ./alpinejs/index.html ./tmp/build/alpinejs
|
|
||||||
tmp/build/_next: tmp/build reactNextJS/out/*
|
|
||||||
mkdir ./tmp/build/_next && \
|
|
||||||
cp -r ./reactNextJS/out/_next ./tmp/build/
|
|
||||||
tmp/build/reactNextJS: tmp/build reactNextJS/out/*
|
|
||||||
mkdir ./tmp/build/reactNextJS && \
|
|
||||||
cp ./reactNextJS/out/*.* ./tmp/build/reactNextJS/
|
|
||||||
tmp/build/assets: tmp/build svelte/dist/* vuejs/dist/*
|
|
||||||
mkdir tmp/build/assets && \
|
|
||||||
cp svelte/dist/assets/* tmp/build/assets/ && \
|
|
||||||
cp vuejs/dist/assets/* tmp/build/assets/
|
|
||||||
tmp/build/vuejs: tmp/build vuejs/dist/*
|
|
||||||
mkdir ./tmp/build/vuejs && \
|
|
||||||
cp ./vuejs/dist/*.* ./tmp/build/vuejs/
|
|
||||||
tmp/build/svelte: tmp/build svelte/dist/*
|
|
||||||
mkdir ./tmp/build/svelte && \
|
|
||||||
cp -r ./svelte/dist/* ./tmp/build/svelte/
|
|
||||||
tmp/build/index.html: tmp/build index.html
|
|
||||||
cp index.html tmp/build/
|
|
||||||
|
|
||||||
web: tmp/build/assets tmp/build/vanillaJS tmp/build/react tmp/build/alpinejs tmp/build/_next tmp/build/reactNextJS tmp/build/assets tmp/build/vuejs tmp/build/svelte tmp/build/index.html
|
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
|
build: web server.go
|
||||||
go build server.go
|
go build server.go
|
||||||
run: web server.go
|
run: web server.go
|
||||||
go run server.go
|
go run server.go
|
||||||
air: nil web server.go
|
air: nil web server.go
|
||||||
air server.go
|
air server.go
|
||||||
clean: cleanNext cleanVue cleanSvelte
|
clean: cleanNext cleanVue cleanSvelte cleandist
|
||||||
rm -rf tmp
|
rm -rf tmp
|
||||||
rm -f server
|
rm -f server
|
||||||
|
rm -f index.html
|
||||||
|
|
||||||
.PHONY: all build clean cleanbuild nextjs vuejs svelte run air nil web
|
.PHONY: all build clean cleanbuild nextjs vuejs svelte run air nil web export
|
||||||
|
|||||||
13
index.html
13
index.html
@@ -1,13 +0,0 @@
|
|||||||
<html>
|
|
||||||
<body>
|
|
||||||
<h1>Frontends</h1>
|
|
||||||
<ul>
|
|
||||||
<li><a href="vanillaJS/">JS Only</a></li>
|
|
||||||
<li><a href="react/">React</a></li>
|
|
||||||
<li><a href="reactNextJS/">React (with Next)</a></li>
|
|
||||||
<li><a href="alpinejs/">Alpine.js</a></li>
|
|
||||||
<li><a href="svelte/">Svelte</a></li>
|
|
||||||
<li><a href="vuejs/">Vue.js</a></li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
10
index.tmpl
Normal file
10
index.tmpl
Normal 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
20
reactNative/.gitignore
vendored
Normal 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
40
reactNative/README.md
Normal 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
37
reactNative/app.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
reactNative/app/_layout.tsx
Normal file
9
reactNative/app/_layout.tsx
Normal 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
33
reactNative/app/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
BIN
reactNative/assets/fonts/SpaceMono-Regular.ttf
Executable file
BIN
reactNative/assets/fonts/SpaceMono-Regular.ttf
Executable file
Binary file not shown.
BIN
reactNative/assets/images/adaptive-icon.png
Normal file
BIN
reactNative/assets/images/adaptive-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
reactNative/assets/images/favicon.png
Normal file
BIN
reactNative/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
reactNative/assets/images/icon.png
Normal file
BIN
reactNative/assets/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
reactNative/assets/images/partial-react-logo.png
Normal file
BIN
reactNative/assets/images/partial-react-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
reactNative/assets/images/react-logo.png
Normal file
BIN
reactNative/assets/images/react-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
reactNative/assets/images/react-logo@2x.png
Normal file
BIN
reactNative/assets/images/react-logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
reactNative/assets/images/react-logo@3x.png
Normal file
BIN
reactNative/assets/images/react-logo@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
reactNative/assets/images/splash.png
Normal file
BIN
reactNative/assets/images/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
6
reactNative/babel.config.js
Normal file
6
reactNative/babel.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = function (api) {
|
||||||
|
api.cache(true);
|
||||||
|
return {
|
||||||
|
presets: ['babel-preset-expo'],
|
||||||
|
};
|
||||||
|
};
|
||||||
31
reactNative/components/Blurb.jsx
Normal file
31
reactNative/components/Blurb.jsx
Normal 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;
|
||||||
26
reactNative/constants/Colors.ts
Normal file
26
reactNative/constants/Colors.ts
Normal 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,
|
||||||
|
},
|
||||||
|
};
|
||||||
1
reactNative/hooks/useColorScheme.ts
Normal file
1
reactNative/hooks/useColorScheme.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { useColorScheme } from 'react-native';
|
||||||
8
reactNative/hooks/useColorScheme.web.ts
Normal file
8
reactNative/hooks/useColorScheme.web.ts
Normal 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';
|
||||||
|
}
|
||||||
22
reactNative/hooks/useThemeColor.ts
Normal file
22
reactNative/hooks/useThemeColor.ts
Normal 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
19570
reactNative/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
49
reactNative/package.json
Normal file
49
reactNative/package.json
Normal 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
|
||||||
|
}
|
||||||
73
reactNative/scripts/reset-project.js
Executable file
73
reactNative/scripts/reset-project.js
Executable 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
17
reactNative/tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": "expo/tsconfig.base",
|
||||||
|
"compilerOptions": {
|
||||||
|
"strict": true,
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".expo/types/**/*.ts",
|
||||||
|
"expo-env.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
output: 'export',
|
output: 'export',
|
||||||
|
basePath: '/reactNextJS',
|
||||||
|
|
||||||
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
|
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
|
||||||
// trailingSlash: true,
|
// trailingSlash: true,
|
||||||
|
|||||||
77
server.go
77
server.go
@@ -3,21 +3,88 @@ package main
|
|||||||
import (
|
import (
|
||||||
"embed"
|
"embed"
|
||||||
"fmt"
|
"fmt"
|
||||||
|
"html/template"
|
||||||
"io/fs"
|
"io/fs"
|
||||||
"net/http"
|
"net/http"
|
||||||
|
"os"
|
||||||
)
|
)
|
||||||
|
|
||||||
const PORT = 3003
|
const PORT = 3003
|
||||||
|
|
||||||
//go:embed "all:tmp/build"
|
//go:embed "all:vuejs/dist"
|
||||||
var webfs embed.FS
|
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 vanillaFiles embed.FS
|
||||||
|
|
||||||
|
//go:embed "alpinejs"
|
||||||
|
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() {
|
func main() {
|
||||||
webfs, err := fs.Sub(webfs, "tmp/build")
|
args := os.Args
|
||||||
|
|
||||||
|
home_template, err := template.ParseFiles("index.tmpl")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
panic(fmt.Sprintf("Error embeding web files: %s\nTry running \"make web\"", err))
|
panic(fmt.Sprintf("Error parsing homepage template\n%s", err))
|
||||||
}
|
}
|
||||||
http.Handle("/", http.FileServerFS(webfs))
|
|
||||||
|
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)
|
err = http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import svelteLogo from './assets/svelte.svg'
|
import svelteLogo from './assets/svelte.svg'
|
||||||
import viteLogo from '/vite.svg'
|
import viteLogo from './assets/vite.svg'
|
||||||
import Counter from './lib/Counter.svelte'
|
import Counter from './lib/Counter.svelte'
|
||||||
import Blurb from './lib/Blurb.svelte';
|
import Blurb from './lib/Blurb.svelte';
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -4,4 +4,5 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
|
|||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [svelte()],
|
plugins: [svelte()],
|
||||||
|
base: '/svelte/'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -14,5 +14,6 @@ export default defineConfig({
|
|||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
base: '/vuejs/'
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user