tonyair
/
silverstripe-webpack
mirror of https://github.com/a2nt/silverstripe-webpack.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Deferred Requirements support

This commit is contained in:
Tony Air 2018-02-22 20:39:58 +07:00
parent 50476d1002
commit 3571b920d0
11 changed files with 245 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -10,14 +10,22 @@ Checkout files at /site/ folder for details
+ WebpackTemplateProvider::WebpackJS('file-name') and WebpackTemplateProvider::WebpackCSS('file-name') can be used at php area
+ All images will be optimised at /site/src/img and will be written to /site/dist/img (by default)
+ Favicons will be generated at /site/dist/icons using /site/src/favicon.png
+ Folder /site/src/js/types is used to create page specific JS (just create a JS file there and it will be compiled)
+ Folder /site/src/js/types is used to create page specific JS (just create JS file there and it will be compiled)
+ Folder /site/src/scss/types is used to create page specific CSS (just create SCSS file there and it will be compiled)
+ Automatic linting (JS+SCSS)
+ Bootstrap 4 included by default
+ Font-Awesome included by default
+ Deferred requirements loading
+ Requirements auto-loading
### Folder structure:
+ /site/_config/webpack.yml (Webpack configurtion)
+ /site/code/WebpackTemplateProvider.php (WebpackJS and WebpackCSS functionality)
+ /site/code/DeferedRequirements.php (Deferred Requirements + Requirements auto-loader)
+ /site/templates/Page.ss (An example Page.ss)
+ /site/src (Your sources)
+ /site/dist (Your production assets)
@ -28,18 +36,16 @@ Checkout files at /site/ folder for details
+ /site/src/js/main.js (Your custom site-wide functionality)
+ /site/src/js/_events.js (Your custom site-wide events)
+ /site/src/js/_pageType_and_component_template.js (A template which can be used to create new modules)
+ /site/src/types/*.js (Extra page-specific modules to be autocompiled. My suggestion is to use *ClassName*.js and then require it at SilverStripe custom controller area)
+ /site/src/types/*.js (Extra page-specific modules to be auto-compiled. My suggestion is to use *ClassName*.js and then require it at SilverStripe custom controller area)
+ /site/src/scss (Your styling to be compiled)
+ /site/src/scss/_components (Your custom SCSS components)
+ /site/src/scss/app.scss (main application file to include sie-wide components)
+ /site/src/scss/app.scss (main application file to include site-wide components)
+ /site/src/scss/_variables.sccs (your custom variables, ex. bootstrap)
+ /site/src/scss/_layout.sccs (Your site-wide styling)
##### P.S to compile page specific styling add following line to /site/src/types/*PageClassName*.js
###### import "../scss/types/*PageClassName*.scss";
### Requirements:
@ -51,14 +57,16 @@ Checkout files at /site/ folder for details
+ git clone https://github.com/a2nt/silverstripe-webpack.git
+ cd silverstripe-webpack
+ composer install
+ yarn install
+ npm install
+ edit robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
### Commands:
+ yarn - to update packages
+ yarn start - to start webpack webserver
+ yarn build - to build assets# silverstripe-webpack
+ yarn start - to start webpack development webserver
+ yarn build - to build production assets
+ yarn lint:check - to check SCSS and JS linting
+ yarn lint:fix - to fix SCSS and JS linting automatically
### TODO:

14
site/_config/webpack.yml
View File

@ -2,10 +2,10 @@
# with all configuration variables presented
# Cuz WebPack compiling script use it to set configuration
WebpackTemplateProvider:
dist: site/dist
hostname: localhost
port: "3000"
pages: site/src/js/types
pagesscss: site/src/scss/types
src: site/src
WebpackTemplateProvider:
SRC: site/src
DIST: site/dist
HOSTNAME: localhost
PORT: "3000"
TYPESJS: site/src/js/types
TYPESSCSS: site/src/scss/types

122
site/code/DeferedRequirements.php Executable file
View File

@ -0,0 +1,122 @@
<?php
class DeferedRequirements extends Object implements TemplateGlobalProvider {
private static $css = [];
private static $js = [];
private static $defered = false;
private static $static_domain;
private static $version;
/**
* @return array
*/
public static function get_template_global_variables()
{
return [
'AutoRequirements' => 'Auto',
'DeferedCSS' => 'loadCSS',
'DeferedJS' => 'loadJS',
];
}
public static function Auto($class = false)
{
// Initialization
Requirements::block(THIRDPARTY_DIR.'/jquery/jquery.js');
if (defined('FONT_AWESOME_DIR')) {
Requirements::block(FONT_AWESOME_DIR.'/css/lib/font-awesome.min.css');
}
Requirements::set_force_js_to_bottom(true);
// Main libs
DeferedRequirements::loadJS('//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
// App libs
DeferedRequirements::loadJS(project().'/dist/js/app.js');
DeferedRequirements::loadCSS(project().'/dist/css/app.css');
// Class libs
if($class) {
DeferedRequirements::loadJS(project() . '/dist/js/' . $class . '.js');
DeferedRequirements::loadCSS(project() . '/dist/css/' . $class . '.css');
}
return self::forTemplate();
}
public static function loadCSS($css)
{
if (self::$defered && !self::_webpackActive()) {
self::$css[] = $css;
} else {
WebpackTemplateProvider::loadCSS($css);
}
}
public static function loadJS($js)
{
if (self::$defered && !self::_webpackActive()) {
self::$js[] = $js;
} else {
WebpackTemplateProvider::loadJS($js);
}
}
protected static function _webpackActive()
{
return class_exists('WebpackTemplateProvider') && WebpackTemplateProvider::isActive();
}
public static function setDefered($bool)
{
self::$defered = $bool;
}
public static function forTemplate()
{
if (!self::$defered || self::_webpackActive()) {
return false;
}
$result = '';
foreach (self::$css as $css) {
$result .= '<i class="defer-cs" data-load="' . self::get_url($css) . '"></i>';
}
foreach (self::$js as $js) {
$result .= '<i class="defer-sc" data-load="' . self::get_url($js) . '"></i>';
}
$result .=
'<script type="text/javascript">function lsc(a,b){var c=document.createElement("script");c.type="text/javascript",c.readyState'
.'?c.onreadystatechange=function(){"loaded"!=c.readyState&&"complete"!=c.readyState||(c.onreadystatechange=null,b())}'
.':c.onload=function(){b()},c.src=a,document.getElementsByTagName("body")[0].appendChild(c)}'
.'function lscd(a){a<s.length-1&&(a++,lsc(s.item(a).getAttribute("data-load"),function(){lscd(a)}))}'
.'for(var s=document.getElementsByClassName("defer-cs"),i=0;i<s.length;i++){var b=document.createElement("link");b.rel="stylesheet",'
.'b.type="text/css",b.href=s.item(i).getAttribute("data-load"),b.media="all";var c=document.getElementsByTagName("body")[0];'
.'c.appendChild(b)}var s=document.getElementsByClassName("defer-sc"),i=0;lsc(s.item(i).getAttribute("data-load"),function(){lscd(i)});'
.'</script>';
return $result;
}
private static function get_url($url)
{
// external URL
if (strpos($url, '//') !== false) {
return $url;
}
$version = Config::inst()->get('DeferedRequirements', 'version');
$version = $version
? strpos($url, '?') // inner URL
? '&'.$version // add param
: '?'.$version // new param
: ''; // no version defined
$static_domain = Config::inst()->get('DeferedRequirements', 'static_domain');
$static_domain = $static_domain ? $static_domain : '';
return $url.$version;
}
}

63
site/code/WebpackTemplateProvider.php
View File

@ -6,18 +6,6 @@
class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
{
/**
* @return array
*/
public static function get_template_global_variables()
{
return [
'WebpackDevServer' => 'isActive',
'WebpackCSS' => 'loadCSS',
'WebpackJS' => 'loadJS',
];
}
/**
* @var int port number
*/
@ -31,7 +19,19 @@ class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
/**
* @var string assets static files directory
*/
private static $distDir = 'site/dist';
private static $dist = 'site/dist';
/**
* @return array
*/
public static function get_template_global_variables()
{
return [
'WebpackDevServer' => 'isActive',
'WebpackCSS' => 'loadCSS',
'WebpackJS' => 'loadJS',
];
}
/**
* Load CSS file
@ -39,9 +39,7 @@ class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
*/
public static function loadCSS($path)
{
if (!self::isActive()) {
Requirements::css(self::_toPublicPath($path));
}
Requirements::css(self::_getPath($path));
}
/**
@ -50,11 +48,7 @@ class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
*/
public static function loadJS($path)
{
$path = self::isActive() ?
self::_toDevServerPath($path) :
self::_toPublicPath($path);
Requirements::javascript($path);
Requirements::javascript(self::_getPath($path));
}
@ -66,9 +60,16 @@ class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
{
$class = __CLASS__;
return Director::isDev() && !!@fsockopen(
$class::config()->get('hostname'),
$class::config()->get('port')
);
$class::config()->get('HOSTNAME'),
$class::config()->get('PORT')
);
}
protected static function _getPath($path)
{
return self::isActive() && strpos($path,'//') === false ?
self::_toDevServerPath($path) :
self::_toPublicPath($path);
}
protected static function _toDevServerPath($path)
@ -77,15 +78,21 @@ class WebpackTemplateProvider extends Object implements TemplateGlobalProvider
return sprintf(
'%s%s:%s/%s',
Director::protocol(),
$class::config()->get('hostname'),
$class::config()->get('port'),
$path
$class::config()->get('HOSTNAME'),
$class::config()->get('PORT'),
basename($path)
);
}
protected static function _toPublicPath($path)
{
$class = __CLASS__;
return $class::config()->get('distDir') . '/' . $path;
return strpos($path,'//') === false ?
Controller::join_links(
$class::config()->get('DIST'),
(strpos($path,'.css') ? 'css' : 'js' ),
$path
)
: $path;
}
}

3
site/src/js/app.js
View File

@ -18,9 +18,6 @@ import 'bootstrap/js/dist/tab';
// import your custom UI components
import './main';
// bootstrap fix
window.Popper = Popper;
// import images
function importAll(r) {
return r.keys().map(r);

1
site/templates/Includes/Prestyling.ss Normal file
View File

@ -0,0 +1 @@
<style>html,body{font-size:14px;margin:0;padding:0;background:#fff;color:#333}.bubblingG{width:78px;height:49px;margin:auto}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;background:rgba(255,255,255,.9);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.bubblingG span{display:inline-block;vertical-align:middle;width:10px;height:10px;margin:24px auto;background:#000;border-radius:49px;animation:bubblingG 1.5s infinite alternate}#bubblingG_1{animation-delay:0s}#bubblingG_2{animation-delay:.45s}#bubblingG_3{animation-delay:.9s}@keyframes bubblingG{0%{width:10px;height:10px;background-color:#000;transform:translateY(0)}100%{width:23px;height:23px;background-color:#fff;transform:translateY(-20px)}}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:9999;padding:.5rem 1rem;text-align:center;color:#fff;background:#FF0000}</style>

16
site/templates/Page.ss
View File

@ -40,8 +40,19 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<% include Prestyling %>
</head>
<body oncontextmenu="return false;">
<%-- Upgrade your Browser notice --%>
<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
<%-- No JS enabled notice --%>
<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
<%-- Loading Spinner --%>
<div id="PageLoading"><div class="loading-spinner"><div class="bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div><br/><%t Page.LOADINGTEXT 'LOADING ..' %></div></div>
<header>
</header>
@ -60,8 +71,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
$WebpackJS('app.js')
$WebpackCSS('app.css')
<%-- Require CSS+JS from /site/dist/[js,css]/[ClassName].[js,css] --%>
$AutoRequirements($ClassName).RAW
</body>
</html>

22
webpack.config.common.js
View File

@ -1,15 +1,19 @@
const path = require("path");
/*
* Common Environment
*/
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const conf = require("./webpack.configuration");
const isProduction = process.env.NODE_ENV === "production";
const path = require("path");
const includes = {
app: path.join(conf.SRC, "js/app.js"),
app: path.join(__dirname, conf.SRC, "js/app.js"),
};
const _getAllFilesFromFolder = function(dir) {
dir = path.join(__dirname, dir);
let filesystem = require("fs");
let results = [];
@ -28,13 +32,13 @@ const _getAllFilesFromFolder = function(dir) {
};
// add page specific scripts
const pageScripts = _getAllFilesFromFolder(conf.PAGES);
const pageScripts = _getAllFilesFromFolder(conf.TYPESJS);
pageScripts.forEach((file) => {
includes[path.basename(file, ".js")] = file;
});
// add page specific scss
const scssIncludes = _getAllFilesFromFolder(conf.PAGESSCSS);
const scssIncludes = _getAllFilesFromFolder(conf.TYPESSCSS);
scssIncludes.forEach((file) => {
includes[path.basename(file, ".scss")] = file;
});
@ -75,7 +79,9 @@ module.exports = {
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "img/[name].[ext]",
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '/site/dist/img/'
}
}, {
test: /\.worker\.js$/,

21
webpack.config.dev.js
View File

@ -1,3 +1,8 @@
/*
* Development assets generation
*/
const path = require("path");
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const merge = require('webpack-merge');
@ -16,14 +21,14 @@ const config = merge.strategy({
'react-hot-loader/patch',
'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT + '/',
'webpack/hot/only-dev-server',
],
]
},
output: {
path: conf.BUILD,
path: path.join(__dirname, conf.DIST),
filename: '[name].js',
// necessary for HMR to know where to load the hot update chunks
publicPath: 'http://' + conf.HOSTNAME + ':' + conf.PORT + '/'
publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/'
},
module: {
@ -56,9 +61,7 @@ const config = merge.strategy({
'Chrome >= 44', // Retail
'Samsung >= 4'
]
}),
// http://lostgrid.org/docs.html
require('lost')
})
]
}
}, {
@ -72,7 +75,7 @@ const config = merge.strategy({
use: [{
loader: 'url-loader'
}]
}, ]
}]
},
plugins: [
new webpack.NamedModulesPlugin(),
@ -84,7 +87,9 @@ const config = merge.strategy({
host: IP,
port: PORT,
historyApiFallback: true,
hot: true,
hot: false,
clientLogLevel: "info",
//watchContentBase: true,
overlay: {
warnings: true,
errors: true

39
webpack.config.prod.js
View File

@ -1,22 +1,25 @@
const path = require('path');
const autoprefixer = require('autoprefixer');
/*
* Production assets generation
*/
const webpack = require('webpack');
const conf = require('./webpack.configuration');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
const conf = require('./webpack.configuration');
const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const fs = require("fs");
const yaml = require("js-yaml");
const confYML = yaml.safeLoad(fs.readFileSync(path.join(__dirname, "site/_config/webpack.yml"), "utf8"));
module.exports = merge(common, {
output: {
path: conf.BUILD,
filename: '[name].js',
publicPath: confYML.WebpackTemplateProvider.dist + '/',
path: path.join(__dirname, conf.DIST),
filename: 'js/[name].js',
publicPath: conf.DIST + '/',
},
module: {
@ -46,9 +49,7 @@ module.exports = merge(common, {
'Chrome >= 44', // Retail
'Samsung >= 4'
]
}),
// http://lostgrid.org/docs.html
require('lost')
})
]
}
}, {
@ -66,35 +67,33 @@ module.exports = merge(common, {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/', // where the fonts will go
publicPath: './' // override the default path
outputPath: 'fonts/',
publicPath: '../fonts/'
}
}]
} ]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
comments: false
}),
new ExtractTextPlugin({
filename: '[name].css',
filename: 'css/[name].css',
allChunks: true
}),
new OptimizeCSSAssets(),
new FaviconsWebpackPlugin({
logo: conf.SRC + '/favicon.png',
logo: path.join(__dirname, conf.SRC) + '/favicon.png',
prefix: '/icons/',
statsFilename: confYML.WebpackTemplateProvider.dist + '/icons/iconstats.json',
statsFilename: conf.DIST + '/icons/iconstats.json',
icons: {
android: true,
appleIcon: true,

13
webpack.configuration.js
View File

@ -1,13 +1,10 @@
/*
* Load webpack configuration from site/_config/webpack.yml
*/
const path = require("path");
const fs = require("fs");
const yaml = require("js-yaml");
const conf = yaml.safeLoad(fs.readFileSync(path.join(__dirname, "site/_config/webpack.yml"), "utf8"));
module.exports = {
SRC: path.join(__dirname, conf.WebpackTemplateProvider.src),
BUILD: path.join(__dirname, conf.WebpackTemplateProvider.dist),
PAGES: path.join(__dirname, conf.WebpackTemplateProvider.pages),
PAGESSCSS: path.join(__dirname, conf.WebpackTemplateProvider.pagesscss),
HOSTNAME: conf.WebpackTemplateProvider.hostname,
PORT: conf.WebpackTemplateProvider.port
};
module.exports = conf.WebpackTemplateProvider;