external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-13 01:07:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs -> spaces

Browse Source
This commit is contained in:
Jason Miller
2018-03-29 15:43:14 -04:00
parent 5e6500d196
commit 76ceea0e52
19 changed files with 503 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
config/client-boot.js
View File

@@ -1,27 +0,0 @@
import { h, render } from 'preact';
if (process.env.NODE_ENV === 'development') {
// enable preact devtools
require('preact/debug');
}
else if (process.env.ADD_SW && 'serviceWorker' in navigator && location.protocol === 'https:') {
// eslint-disable-next-line no-undef
navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js');
}
const interopDefault = m => m && m.default ? m.default : m;
let app = interopDefault(require('app-entry-point'));
if (typeof app === 'function') {
let root = document.getElementById('app') || document.body.firstElementChild;
let init = () => {
let app = interopDefault(require('app-entry-point'));
root = render(h(app), document.body, root);
};
if (module.hot) module.hot.accept('app-entry-point', init);
init();
}

64
config/prerender-loader.js Normal file
View File

@@ -0,0 +1,64 @@
const path = require('path');
const vm = require('vm');
module.exports = function (content) {
const jsdom = require('jsdom');
const preact = require('preact');
const renderToString = require('preact-render-to-string');
this.cacheable && this.cacheable();
const callback = this.async();
// const dom = new jsdom.JSDOM(`<!DOCTYPE html><html><head></head><body></body></html>`, {
const dom = new jsdom.JSDOM(content, {
includeNodeLocations: false,
runScripts: 'outside-only'
});
const { window } = dom;
const { document } = window;
// console.log(content);
const root = document.getElementById('app');
this.loadModule(path.join(__dirname, 'client-boot.js'), (err, source) => {
if (err) return callback(err);
console.log(source);
let mod = eval(source);
let props = {};
// console.log(mod);
let vnode = preact.createElement(mod, props);
let frag = document.createElement('div');
frag.innerHTML = renderToString(vnode);
root.parentNode.replaceChild(frag.firstChild, root);
let html = dom.serialize();
callback(null, html);
// return html = `module.exports = ${JSON.stringify(html)}`;
// return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
});
// global.window = global;
// global.document = {};
// return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
/*
let callback = this.async();
let parts = content.split(/\{\{prerender\}\}/gi);
if (parts.length<2) {
// callback(null, `module.exports = ${JSON.stringify(content)}`);
callback(null, content);
return;
}
// let html = `
// window = {};
// module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
let html = `module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
callback(null, html);
*/
};

BIN
src/assets/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 27 KiB

22
src/components/app/style.scss
View File

@@ -2,20 +2,24 @@
.app { .app {
position: absolute; position: absolute;
top: $toolbar-height; display: flex;
flex-direction: column;
top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
overflow: hidden;
z-index: 1;
.header {
flex: 0 0 auto;
position: relative;
}
.content {
flex: 1 1 auto;
contain: size layout style; contain: size layout style;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
> .content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
} }
} }

1
src/components/app/style.scss.d.ts vendored
View File

@@ -1,2 +1,3 @@
export const app: string; export const app: string;
export const header: string;
export const content: string; export const content: string;

5
src/components/header/style.scss
View File

@@ -4,10 +4,11 @@
} }
.toolbar { .toolbar {
height: $toolbar-height; // height: $toolbar-height;
&.minimal { &.minimal {
height: $toolbar-height / 2; display: none;
// height: $toolbar-height / 2;
} }
// > * { // > * {

18
src/index.html
View File

@@ -6,23 +6,11 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab8">
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<!--
<% for (var chunk of webpack.chunks) { %>
<% for (var file of chunk.files) { %>
<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
<% } else if (file.match(/manifest\.json$/)) { %>
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
<% } %>
<% } %>
<% } %>
-->
</head> </head>
<body> <body>
<%= <div id="app" prerender></div>
/*require('../config/prerender')()*/ <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
htmlWebpackPlugin.options.prerender()
%>
</body> </body>
</html> </html>

1
src/style/index.scss
View File

@@ -1,6 +1,7 @@
// @import './material-icons.scss'; // @import './material-icons.scss';
// @import 'material-components-web/material-components-web'; // @import 'material-components-web/material-components-web';
@import './reset.scss'; @import './reset.scss';
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
html, body { html, body {
height: 100%; height: 100%;

4
webpack.config.js
View File

@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin'); const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ReplacePlugin = require('webpack-plugin-replace'); const ReplacePlugin = require('webpack-plugin-replace');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin'); const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -27,7 +28,7 @@ module.exports = function(_, env) {
return { return {
mode: isProd ? 'production' : 'development', mode: isProd ? 'production' : 'development',
entry: path.join(__dirname, 'config/client-boot.js'), entry: './src/index',
output: { output: {
filename: isProd ? '[name].[chunkhash:5].js' : '[name].js', filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
chunkFilename: '[name].chunk.[chunkhash:5].js', chunkFilename: '[name].chunk.[chunkhash:5].js',
@@ -37,7 +38,6 @@ module.exports = function(_, env) {
resolve: { resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'], extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
alias: { alias: {
'app-entry-point': path.join(__dirname, 'src/index'),
style: path.join(__dirname, 'src/style') style: path.join(__dirname, 'src/style')
} }
}, },