Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from gulp and webpack, to vite #2815

Draft
wants to merge 5 commits into
base: devel
Choose a base branch
from
Draft

Migrate from gulp and webpack, to vite #2815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1180f74
Migrate from Gulp + Webpack to Vite.
pygeek Sep 11, 2024
4c45d2c
Add linter for HMR support.
pygeek Sep 11, 2024
c6dad35
Update Makefile.
pygeek Sep 11, 2024
a7ed9ee
Re-add autoprefixer—now as a vite build plugin. Remove unncessary pol…
pygeek Sep 11, 2024
9772e1d
Move javascript out of index.html. Import jQuery discretely.
pygeek Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
493 changes: 0 additions & 493 deletions Gulpfile.js
View file
Open in desktop

This file was deleted.

16 changes: 4 additions & 12 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ PATH:=node_modules/.bin/:$(PATH)
dev: node_modules .husky
npm run dev

.husky:
.husky:
npx husky install

node_modules: package.json
Expand All @@ -15,16 +15,8 @@ pretty prettier lint-fix:
npm run prettier
npm run lint:fix

min: minjs mincss

mincss:
npm run gulp min_styl
@echo 'gzipped ogs.min.css: ' `gzip -9 dist/ogs.min.css -c | wc -c`

minjs:
npm run webpack -- --mode production --optimization-minimize --devtool=source-map
@echo 'gzipped ogs.min.js: ' `gzip -9 dist/ogs.min.js -c | wc -c`
@echo 'gzipped vendor.min.js: ' `gzip -9 dist/vendor.min.js -c | wc -c`
build:
npm run yarn build

analyze:
ANALYZE=true npm run analyze
Expand All @@ -35,6 +27,6 @@ test:
#NODE_PATH=$(NODE_PATH) PATH=$(PATH) PRODUCTION=true webpack --optimization-minimize --devtool=source-map --profile --json > analyze.json
#npm run webpack-bundle-analyzer dist/ analyze.json

.PHONY: dev min minjs mincss test analyze pretty prettier lint-fix .husky
.PHONY: dev build test analyze pretty prettier lint-fix .husky

-include Makefile.production
22 changes: 13 additions & 9 deletions eslint.config.mjs → eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import jsdoc from "eslint-plugin-jsdoc";
// TODO: Re-add jsdoc replace eslint + prettier with biome or oxc
//import jsdoc from "eslint-plugin-jsdoc";
import header from "@tony.ganchev/eslint-plugin-header";
import prettier from "eslint-plugin-prettier";
//import prettier from "eslint-plugin-prettier";
import reactRefresh from "eslint-plugin-react-refresh";
import reactHooks from "eslint-plugin-react-hooks";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import { fixupPluginRules } from "@eslint/compat";
Expand All @@ -21,14 +23,15 @@ const compat = new FlatCompat({

export default [
{
ignores: ["**/node_modules", "**/dist", "**/i18n", "**/typings_manual", "**/.github"],
ignores: ["**/node_modules", "**/dist", "**/i18n", "**/typings_manual", "**/.github", "eslint.config.js"],
},
...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"),
...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended"),//, //"prettier"),
{
plugins: {
jsdoc,
//jsdoc,
header,
prettier,
//prettier,
reactRefresh,
"react-hooks": fixupPluginRules(reactHooks),
"@typescript-eslint": typescriptEslint,
},
Expand Down Expand Up @@ -65,6 +68,7 @@ export default [
"@typescript-eslint/consistent-type-assertions": "error",
"@typescript-eslint/member-delimiter-style": "error",
"@typescript-eslint/no-floating-promises": "error",
"reactRefresh/only-export-components": "warn",

"@typescript-eslint/no-inferrable-types": [
"error",
Expand Down Expand Up @@ -105,8 +109,8 @@ export default [
],

"id-match": "error",
"jsdoc/check-alignment": "error",
"jsdoc/require-asterisk-prefix": "error",
//"jsdoc/check-alignment": "error",
//"jsdoc/require-asterisk-prefix": "error",
"linebreak-style": ["error", "unix"],
"no-caller": "error",
"no-cond-assign": "error",
Expand Down Expand Up @@ -145,7 +149,7 @@ export default [
},
],

"prettier/prettier": "error",
//"prettier/prettier": "error",
"use-isnan": "error",

"header/header": [
Expand Down
213 changes: 16 additions & 197 deletions src/index.html → index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
<!doctype html>
<html lang="{{PAGE_LANGUAGE}}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't Vite also have the ability to use variables in html?

https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this was only done for rapid prototyping.

<html lang="en">
<head>
<meta charset="utf-8">
<title>{{PAGE_TITLE}}</title>
<title>Play Go at online-go.com!</title>

<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="application-name" content="Online-Go.com"/>
<meta name="keywords" content="{{PAGE_KEYWORDS}}"/>
<meta name="Description" content="{{PAGE_DESCRIPTION}}">
<meta name="keywords" content=""/>
<meta name="Description" content="">

<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="https://cdn.online-go.com/icons/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="https://cdn.online-go.com/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://cdn.online-go.com/icons/apple-touch-icon-60x60.png">
Expand All @@ -38,11 +37,10 @@

<meta property="og:site_name" content="online-go.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{OG_TITLE}}" />
<meta property="og:url" content="{{OG_URL}}" />
<meta property="og:image" content="{{OG_IMAGE}}" />
<meta property="og:description" content="{{OG_DESCRIPTION}}" />

<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<style>
@font-face {
font-family: 'Nunito';
Expand Down Expand Up @@ -149,7 +147,7 @@
background-color: #1A1A1A;
}
</style>
{{EXTRA_CONFIG}}
<script>window['websocket_host'] = "https://beta.online-go.com";</script>
</head>
<body>
<script>
Expand All @@ -167,7 +165,7 @@

/* When browsers use Google Translate it breaks React apps like ours because they
* replace text nodes with <font> tags, changing the dom structure and causing
* React to throw errors.
* React to throw errors.
*
* This code is the workaround described by the react team here:
* https://github.com/facebook/react/issues/11538#issuecomment-417504600
Expand Down Expand Up @@ -254,175 +252,28 @@
</div></div>
<div id="main-content"></div>
<div id="toast-container"></div>


<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="{{CDN_SERVICE}}/{{RELEASE}}/ogs.{{VERSION_DOTCSS}}">
</noscript>

<script>
try {
var script = document.createElement('script');
script.id = "ogs_score_estimator_script";
try {
new WebAssembly.Memory({ initial: 0 });
console.log("WASM support detected, score estimator will be fast");
script.src = "/OGSScoreEstimator/OGSScoreEstimator-0.7.0.js";
script.src = "//localhost:8080/OGSScoreEstimator/OGSScoreEstimator-0.7.0.js";
} catch (error) {
console.warn(error);
console.log("No WASM support detected, score estimator falling back to ASM.js mode");
script.src = "/OGSScoreEstimator/OGSScoreEstimator-0.7.0.asm.js";
script.src = "//localhost:8080/OGSScoreEstimator/OGSScoreEstimator-0.7.0.asm.js";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this work in other environments? (i.e. user clients)

Copy link
Contributor Author

@pygeek pygeek Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Values were temporarily hardcoded for prototyping.

}
document.head.appendChild(script);
} catch (e) {
console.error(e);
}
</script>
<script defer src=""></script>
<script defer src="https://cdn.online-go.com/goban/8.3.50/goban.js"></script>

<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
var inner = addStylesNode.textContent
try {
/* Allow the ability to override the css file we load for development / testing purposes */
if (localStorage.getItem('ogs-css')) {
inner = inner.replace("{{CDN_SERVICE}}/{{RELEASE}}/ogs.{{VERSION_DOTCSS}}", "{{CDN_SERVICE}}/" + localStorage.getItem('ogs-css'));
}
} catch (e) {
console.error(e);
}
replacement.innerHTML = inner;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>

<script defer src="https://cdn.online-go.com/lib/es6-shim/0.35.3/es6-shim{{MIN}}.js"></script>
<script defer src="https://cdn.online-go.com/lib/jquery/3.1.1/jquery{{MIN}}.js"></script>
<script defer src="{{GOBAN_JS}}"></script>
<script defer src="{{CDN_SERVICE}}/{{RELEASE}}/vendor.{{VENDOR_HASH_DOTJS}}"></script>


<script type="text/javascript">var supported_languages = {{SUPPORTED_LANGUAGES}};</script>
<script type="text/javascript">
var ogs_version='{{VERSION}}';
var ogs_release='{{RELEASE}}';
var ogs_language_version='{{LANGUAGE_VERSION}}';
var cdn_service = '{{CDN_SERVICE}}';

/* Detect preferred language */

function isSupportedLanguage(lang) {
if (!lang) {
return null;
}

lang = lang.toLowerCase();

if (lang in supported_languages) {
return lang;
}

lang = lang.replace(/_/, '-');

if (lang in supported_languages) {
return lang;
}

if (lang === 'zh') {
lang = 'zh-cn';
}
if (lang.indexOf('zh-hans') >= 0) {
lang = 'zh-cn';
}
if (lang.indexOf('zh-hant') >= 0) {
lang = 'zh-tw';
}
if (lang.indexOf('zh-hk') >= 0) {
lang = 'zh-tw';
}

if (lang in supported_languages) {
return lang;
}

lang = lang.replace(/-[a-z]+/, '');

if (lang in supported_languages) {
return lang;
}

return null;
}

function getPreferredLanguage() {
try {
var set_lang = JSON.parse(localStorage.getItem('ogs.preferences.language') || 'null');
if (set_lang !== "auto") {
var lang = isSupportedLanguage(set_lang);
if (lang) {
return lang;
} else if (set_lang && localStorage.getItem('ogs.preferences.language') != '"auto"') {
console.error('User selected language: ', localStorage.getItem('ogs.preferences.language'), 'is not a recognized supported language');
}
}
} catch (e) {
console.error(e);
}

try {
for (var i = 0; i < navigator.languages.length; ++i) {
var lang = isSupportedLanguage(navigator.languages[i]);
if (lang) {
return lang;
}
}
} catch (e) {
}

try {
return isSupportedLanguage(navigator.language || navigator.userLanguage) || 'en';
} catch (e) {
}

return 'en';
}


var ogs_current_language = 'en';
try {
ogs_current_language = getPreferredLanguage();
} catch (e) {
console.error(e);
}
window['ogs_current_language'] = ogs_current_language || 'en';

/* Load our translations */
var language_path = "{{CDN_SERVICE}}/{{RELEASE}}/locale/" + ogs_current_language + ".{{LANGUAGE_VERSION_DOTJS}}";
language_path = language_path.replace('///', '/'); /* in dev mode, we don't use the cdn or release vars */
document.write('<script defer src="' + language_path + '"><' + '/script>');

/* Load OGS. We can override what script is loaded by setting the
* 'ogs-script' entry in localStorage (useful for testing versions before they're
* released to everyone) */
var ogs_script_path = "{{CDN_SERVICE}}/{{RELEASE}}/ogs.{{OGS_VERSION_HASH_DOTJS}}";
try {
if (localStorage.getItem('ogs-script')) {
ogs_script_path = "{{CDN_SERVICE}}/" + localStorage.getItem('ogs-script');
}
} catch (e) {
console.error(e);
}
document.write('<script defer src="' + ogs_script_path + '"><'+'/script>');

</script>


<script type="text/javascript">var supported_languages = {"be":"Беларуская","ca":"Català","cs":"Čeština","da":"Dansk","de":"Deutsch","en":"English","eo":"Esperanto","es":"Español","eu":"Euskara","et":"Eesti keel","el":"ελληνικά","fi":"Suomi","fr":"Français","he":"עִבְרִית","hu":"Magyar","hr":"Hrvatski","it":"Italiano","ja":"日本語","ko":"한국어","nl":"Nederlands","pl":"Polski","pt":"Português","ro":"Română","ru":"Русский","sr":"Српски","sv":"Svenska","tr":"Türkçe","uk":"Українська","th":"ภาษาไทย","vi":"Tiếng Việt","zh-cn":"简体中文","zh-tw":"繁體中文","debug":"Debug"};</script>
<script>
var MODE = 'dev';
if (/online-(go|baduk|weiqi|covay|igo).(com|net)$/.test(document.location.host) && !(/dev/.test(document.location.host))) {
Expand All @@ -438,39 +289,7 @@
}
</script>

<script type="text/javascript">
function version_print_setters() {
var ret = "\n\n";

var scripts = $("script");
for (var idx = 0; idx < scripts.length; ++idx) {
var m = scripts[idx].src.match(/https?:\/\/[^\/]+\/(.*\/ogs\..*\.js)/)
if (m) {
var path = scripts[idx].src
ret += "localStorage.setItem('ogs-script', '" + m[1] + "');\n";
}
}

var stylesheets = $("link");
for (var idx = 0; idx < stylesheets.length; ++idx) {
if (stylesheets[idx].rel === "stylesheet") {
var m = stylesheets[idx].href.match(/https?:\/\/[^\/]+\/(.*\/ogs\..*\.css)/)
if (m) {
var path = stylesheets[idx].src
ret += "localStorage.setItem('ogs-css', '" + m[1] + "');\n";
}
}
}

return ret + "\n\n";
}
function version_clear() {
localStorage.removeItem('ogs-css');
localStorage.removeItem('ogs-script');
}
</script>

{{LIVE_RELOAD}}
<script type="module" src="src/main.tsx"></script>
</body>

</html>
Loading