Attempt to use dream2nix and vite

This commit is contained in:
Matei Adriel 2023-10-29 03:14:12 +01:00
parent c31d69df1b
commit fed8fdcf86
No known key found for this signature in database
22 changed files with 1951 additions and 11725 deletions

View file

25
.github/workflows/deploy.yaml vendored Normal file
View file

@ -0,0 +1,25 @@
name: "Deploy"
on:
pull_request:
push:
jobs:
tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: cachix/install-nix-action@v19
with:
github_access_token: ${{ secrets.GITHUB_TOKEN }}
- uses: cachix/cachix-action@v12
with:
name: erratic-gate
authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'
- run: nix build
- run: nix flake check
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist

View file

@ -1,18 +0,0 @@
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }]
],
env: {
test: {
presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
}
}
}

File diff suppressed because it is too large Load diff

View file

@ -1,10 +1,22 @@
{
inputs.dream2nix.url = "github:nix-community/dream2nix";
outputs = inp:
inp.dream2nix.lib.makeFlakeOutputs {
outputs = inputs:
inputs.dream2nix.lib.makeFlakeOutputs {
systems = [ "x86_64-linux" ];
config.projectRoot = ./.;
source = ./.;
projects = ./projects.toml;
};
# {{{ Caching and whatnot
nixConfig = {
# extra-substituters = [
# "erratic-gate.cachix.org-1:Ijiu/v//aVpKO4xBqV+2AM2s2uQYOnGCfoj9fYRXxtk" # I think I need this for neovim-nightly?
# ];
#
# extra-trusted-public-keys = [
# "nix-community.cachix.org-1:mB9FSh9qf2dCimDSUo8Zy7bkq5CX+/rkCWyvRCYg3Fs="
# ];
};
# }}}
}

64
index.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logic gate simulator</title>
<meta name="pinterest" content="nopin" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
rel="stylesheet"
/>
<meta property="og:title" content="Logic gate simulator" />
<meta property="og:description" content="A logic gate simulator made for infoeducatie 2019" />
<meta property="og:url" content="https://mateiadrielrafael.github.io/logic-gate-simulator/" />
<meta
name="Description"
content="A logic gate simulator made for infoeducatie 2019"
/>
<link rel="icon" href="/favicon.ico" />
<meta charset="UTF-8" />
</head>
<body
ondragstart="return false;"
ondrop="return false;"
oncontextmenu="return false"
>
<!--The react app is rendered here-->
<div id="app"></div>
<!--The splash screen structure-->
<div class="Splash">
<!--Loading animation-->
<div class="loading">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<!--In case someone tries to laod this with js disabled-->
<noscript> JavaScript must be enabled to run this app. </noscript>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>

11357
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,64 +1,33 @@
{
"name": "logic-gate-simulator",
"version": "1.0.0",
"main": "./src/index.ts",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "cross-env NODE_ENV=production webpack",
"build:server": "cross-env NODE_ENV=server webpack",
"show": "gource -f --start-date \"2019-07-01 12:00\" --key --hide dirnames,filenames,bloom -s 0.3",
"start": "node ./dist/server"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@types/deepmerge": "^2.2.0",
"@types/express": "^4.17.0",
"@types/gh-pages": "^2.0.0",
"@types/mainloop.js": "^1.0.5",
"@types/react-helmet": "^5.0.8",
"@types/react-router-dom": "^4.3.4",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-regenerator-runtime": "^6.5.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.2.0",
"css-loader": "^3.0.0",
"file-loader": "^4.1.0",
"gh-pages": "^2.0.1",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"typescript": "^3.8.3",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.9.0",
"@eix-js/utils": "0.0.6",
"@material-ui/core": "^4.2.1",
"deepmerge": "^4.0.0",
"express": "^4.17.1",
"keycode": "^2.2.0",
"mainloop.js": "^1.0.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-router-dom": "^5.0.1",
"react-toastify": "^5.3.2",
"rxjs": "^6.5.2",
"rxjs-hooks": "^0.5.1"
}
"name": "erratic-gate",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"check": "tsc",
"preview": "vite preview"
},
"devDependencies": {
"@types/deepmerge": "^2.2.0",
"@types/mainloop.js": "^1.0.5",
"@types/node": "^1.0.5",
"@types/react-router-dom": "^4.3.4",
"@vitejs/plugin-react": "^4.0.0-beta.0",
"typescript": "^5.0.2",
"vite": "^4.3.0"
},
"dependencies": {
"@eix-js/utils": "0.0.6",
"@material-ui/core": "^4.2.1",
"deepmerge": "^4.0.0",
"keycode": "^2.2.0",
"mainloop.js": "^1.0.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-toastify": "^5.3.2",
"rxjs": "^6.5.2",
"rxjs-hooks": "^0.5.1"
}
}

View file

@ -8,11 +8,11 @@
# upstream dream2nix flake:
# nix run github:nix-community/dream2nix#detect-projects $source
[logic-gate-simulator]
name = "logic-gate-simulator"
[erratic-gate]
name = "erratic-gate"
relPath = ""
subsystem = "nodejs"
translator = "package-lock"
translators = [ "package-lock", "package-json",]
translator = "package-json"
builder = "strict-builder"
[logic-gate-simulator.subsystemInfo]
[erratic-gate.subsystemInfo]

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This doesnt work inside react helmetv-->
<meta name="pinterest" content="nopin" />
</head>
<body
ondragstart="return false;"
ondrop="return false;"
oncontextmenu="return false"
>
<!--The react app is rendered here-->
<div id="app"></div>
<!--The splash screen structure-->
<div class="Splash">
<!--Loading animation-->
<div class="loading">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<!--In case someone tries to laod this with js disabled-->
<noscript> JavaScript must be enabled to run this app. </noscript>
</div>
</body>
</html>

View file

@ -11,7 +11,6 @@ import React, { useEffect } from 'react'
import CssBaseline from '@material-ui/core/CssBaseline'
import Theme from '@material-ui/styles/ThemeProvider'
import Sidebar from './Sidebar'
import Head from './Head'
import Root from './Root'
import LogicGatePage from '../../logic-gates/components/LogicGatesPage'
import { loadSubject } from '../subjects/loadedSubject'
@ -25,7 +24,6 @@ const App = () => {
return (
<>
<Head />
<CssBaseline />
<Theme theme={muiTheme}>

View file

@ -1,45 +0,0 @@
import Helmet from 'react-helmet'
import React from 'react'
const title = 'Logic gate simulator'
const description = 'A logic gate simulator made for infoeducatie 2019'
const url = 'https://logic-gate-simulator.herokuapp.com/'
const Head = () => {
return (
<Helmet>
<title>{title}</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
rel="stylesheet"
/>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta
name="Description"
content="A logic gate simulator made for infoeducatie 2019"
/>
<link rel="icon" href={require('../../../assets/favicon.ico')} />
</Helmet>
)
}
export default Head

View file

@ -117,7 +117,7 @@ const GateRawProperty = ({
raw.type === 'text' ||
raw.type === 'string'
) {
return (input = (
return (
<TextField
onChange={handleChange}
label={displayableName}
@ -126,9 +126,9 @@ const GateRawProperty = ({
multiline={raw.type === 'string'}
rowsMax={7}
/>
))
)
} else if (raw.type === 'boolean') {
return (input = (
return (
<>
<span className="checkbox-label">{displayableName}</span>
<CheckBox
@ -139,7 +139,7 @@ const GateRawProperty = ({
checked={!!outputSnapshot}
/>{' '}
</>
))
)
}
})()

View file

@ -70,7 +70,8 @@ export const DefaultGateTemplate: GateTemplate = {
enabled: false,
color: 'white'
},
category: categories.basic
category: categories.basic,
info: []
}
/**

View file

@ -92,4 +92,5 @@ export interface GateTemplate {
enabled: boolean
}
category: number // for better sorting
info: string[]
}

View file

@ -1,16 +0,0 @@
import express, { static as _static } from 'express'
import { resolve } from 'path'
// create express app
const app = express()
// serve static assets
app.use(_static(__dirname))
// serve single page application
app.get('*', (rex, res) => {
res.sendFile(resolve(__dirname, 'index.html'))
})
// listen to the port from .env (default to 8080)
app.listen(process.env.PORT || 8080)

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

View file

@ -1,14 +1,29 @@
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true,
"jsx": "preserve",
"experimentalDecorators": true,
"target": "ESNext",
"downlevelIteration": true,
"strictNullChecks": true,
"module": "esnext"
},
"exclude": ["node_modules"],
"include": ["src"]
"compilerOptions": {
"target": "ESNext",
"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Features */
"experimentalDecorators": true,
"downlevelIteration": true,
"strictNullChecks": true
},
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

12
tsconfig.node.json Normal file
View file

@ -0,0 +1,12 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": [
"vite.config.ts"
]
}

7
vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

View file

@ -1,171 +0,0 @@
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const webpackMerge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const CopyPlugin = require('copy-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
const projectRoot = resolve(__dirname)
const sourceFolder = resolve(projectRoot, 'src')
const buildFolder = resolve(projectRoot, 'dist')
const htmlTemplateFile = resolve(sourceFolder, 'index.html')
const babelRule = {
test: /\.(js|tsx?)$/,
use: 'babel-loader'
}
const fileRule = {
test: /\.(png|svg|jpg|gif|ico)$/,
use: ['file-loader']
}
const cssAndSass = [
isProduction
? MiniCssExtractPlugin.loader
: {
loader: 'style-loader',
options: {
singleton: true
}
},
'css-loader'
]
const cssRule = {
test: /\.css$/,
use: cssAndSass
}
const sassRule = {
test: /\.scss$/,
use: [
...cssAndSass,
{
loader: 'sass-loader',
options: {
includePaths: [sourceFolder]
}
}
]
}
const serverConfig = {
mode: 'production',
target: 'node',
externals: [nodeExternals()],
module: {
rules: [babelRule]
},
resolve: {
extensions: ['.ts', '.js', '.json']
},
entry: [resolve(sourceFolder, 'server')],
output: {
filename: 'server.js',
path: buildFolder,
publicPath: '/'
},
node: {
__dirname: false
},
plugins: [
new CopyPlugin([
{
from: resolve(sourceFolder, 'public'),
to: buildFolder
}
])
]
}
const baseConfig = {
mode: 'none',
entry: ['babel-regenerator-runtime', resolve(sourceFolder, 'index')],
output: {
filename: 'js/[name].js',
path: buildFolder,
publicPath: '/'
},
module: {
rules: [babelRule, sassRule, cssRule, fileRule]
},
resolve: {
extensions: [
'.js',
'.ts',
'.tsx',
'.scss',
'.png',
'.svg',
'.jpg',
'.gif'
]
}
}
const devConfig = {
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: htmlTemplateFile,
chunksSortMode: 'dependency'
})
],
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true
}
}
const prodConfig = {
mode: 'production',
optimization: {
minimize: true,
nodeEnv: 'production'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].min.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: htmlTemplateFile,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
inject: true
// favicon: faviconPath
}),
new HtmlWebpackInlineSourcePlugin()
],
devtool: 'source-map'
}
function getFinalConfig() {
if (process.env.NODE_ENV === 'production') {
console.info('Running production config')
return [webpackMerge(baseConfig, prodConfig), serverConfig]
} else if (process.env.NODE_ENV === 'server') {
console.info('Running server config')
return [serverConfig]
}
console.info('Running development config')
return webpackMerge(baseConfig, devConfig)
}
module.exports = getFinalConfig()