commit edbb25367e6f1a2044aaaaa2258ecece597786d6
parent 36095f3ffcfbc872b95438aeea6d7b8c00c884ad
Author: Sebastian <sebasjm@gmail.com>
Date: Tue, 16 Mar 2021 15:43:32 -0300
make single doc
Diffstat:
6 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
@@ -55,6 +55,15 @@ Aditionally `make dist` will create a zip file with the content to upload into a
make dist
```
+This SPA support building all into a single html file for easy deployment.
+
+```shell
+make build-single
+```
+
+Result will be placed at `packages/frontend/single/index.html`
+
+
## CLI Commands
* `make compile`: Installs dependencies and compile with typescript
diff --git a/build-system/Makefile b/build-system/Makefile
@@ -35,6 +35,11 @@ clean:
build:
pnpm run build
+.PHONY: build
+build-single:
+ pnpm run build-single --filter merchant-backoffice
+ @echo Build done, result at: 'packages/frontend/single/index.html'
+
.PHONY: submodules-update
submodules-update:
git submodule update --recursive --remote
diff --git a/packages/frontend/preact.config.js b/packages/frontend/preact.config.js
@@ -23,6 +23,10 @@ import { DefinePlugin } from 'webpack';
import pack from './package.json';
+const commitHash = require('child_process')
+ .execSync('git rev-parse --short HEAD')
+ .toString();
+
export default {
webpack(config, env, helpers, options) {
// ensure that process.env will not be undefined on runtime
@@ -31,7 +35,7 @@ export default {
// add __VERSION__ to be use in the html
config.plugins.push(
new DefinePlugin({
- 'process.env.__VERSION__': JSON.stringify(pack.version),
+ 'process.env.__VERSION__': JSON.stringify(env.isProd ? pack.version : `dev-${commitHash}`) ,
}),
);
@@ -54,5 +58,24 @@ export default {
}],
});
+ // config.plugins.push(new I18n())
}
}
+
+class I18n {
+ constructor(options) {
+ this.options = options
+ }
+
+ apply(compiler) {
+ compiler.hooks.normalModuleFactory.tap('I18n', (factory) => {
+ // console.log('factory', factory)
+ factory.hooks.parser.for('javascript/auto').tap('I18n', (parser, options) => {
+ // console.log('parser', parser)
+ parser.hooks.callAnyMember.for('console').tap('I18n', expression => {
+ console.log("expression", expression)
+ });
+ });
+ })
+ }
+}
+\ No newline at end of file
diff --git a/packages/frontend/preact.single-config.js b/packages/frontend/preact.single-config.js
@@ -44,12 +44,19 @@ export default {
//for now, pushing all the content into the html is enough
const crittersWrapper = helpers.getPluginsByName(config, 'Critters')
if (crittersWrapper && crittersWrapper.length > 0) {
- const [{ index }] = crittersWrapper
- config.plugins.splice(index, 1)
+ const [{ index }] = crittersWrapper
+ config.plugins.splice(index, 1)
}
//5. remove favicon from src/assets
+ //6. remove performance hints since we now that this is going to be big
+ if (config.performance) {
+ config.performance.hints = false
+ }
+
+ //7. template.html should have a favicon and add js/css content
+
//last, after building remove the mysterious link to stylesheet with remove-link-stylesheet.sh
}
}
diff --git a/packages/frontend/remove-link-stylesheet.sh b/packages/frontend/remove-link-stylesheet.sh
@@ -1,6 +1,6 @@
FILE=$(ls single/bundle.*.css)
BUNDLE=${FILE#single}
grep -q '<link href="'$BUNDLE'" rel="stylesheet">' single/index.html || { echo bundle $BUNDLE not found in index.html; exit 1; }
-echo Removing link from index.html
+echo -n Removing link from index.html ...
sed 's_<link href="'$BUNDLE'" rel="stylesheet">__' -i single/index.html
echo done
diff --git a/packages/frontend/src/components/menu/SideBar.tsx b/packages/frontend/src/components/menu/SideBar.tsx
@@ -44,7 +44,7 @@ export function Sidebar({ mobile, instance, onLogout, admin }: Props): VNode {
<div class="aside-tools">
<div class="aside-tools-label">
<div><b>Taler</b> Merchant Office</div>
- <div class="is-size-7 has-text-right " style={{ lineHeight: 0, marginTop: -10 }}>v{process.env.__VERSION__} ({config.version})</div>
+ <div class="is-size-7 has-text-right " style={{ lineHeight: 0, marginTop: -10 }}>{process.env.__VERSION__} ({config.version})</div>
</div>
</div>
<div class="menu is-menu-main">
