Commit Graph

42 Commits

Author SHA1 Message Date
Ingo Schommer
686c167793 Removed TinyMCE NPM dep
We don't have an easy way to copy over those files automatically into the thirdparty/ dir,
where they are accessible on the webroot (not the case in node_modules).

To avoid confusion, we don't duplicate into node_modules for now.
See https://github.com/silverstripe/silverstripe-framework/pull/5918#issuecomment-244910280
2016-09-16 13:46:10 +12:00
Ingo Schommer
8eac22c628 Separate CSS bundling in Webpack
Multiple entry points can't result in a single bundle.css with a fixed filename, see
https://github.com/webpack/extract-text-webpack-plugin/issues/179

Until that's resolved, it's easier to keep the 'css' task separate in Webpack,
and have a single entry point for all CSS (bundle.scss).

Also partially reverting "Moved frontend assets into admin/ "module"",
which moved too many files: debug.css and install.css need to remain
as framework (not admin) deps. Split out into a separate `framework-css` Webpack
task in preparation for splitting off the module.
2016-09-16 13:46:09 +12:00
Ingo Schommer
9cb9a05ec0 API Removed duplicated thirdparty deps
These were originally copied from node_modules via an "npm run thirdparty" task,
in order to have them loadable with oldschool <script> tags.
Since webpack supports CommonJS-style loading, that's no longer required,
we can simply inline those scripts into the bundle.

We need to use imports-loader though, in order to ensure
that "define" is not available in some module scopes,
which triggers AMD behavior that's not compatible with Webpack's loaders.
See http://webpack.github.io/docs/shimming-modules.html

I've had to pin to the exact versions used in the 3.x CMS,
since jquery-upload has introduced an AMD wrapper sometime
between 6.0 and 6.9 (the latest version NPM automatically pulls in).
This AMD wrapper confuses Webpack, since it's trying to resolve the
dependencies contained in it. We could create shims for those instead,
but the easiest way was to simply revert to the versions already used
before the Webpack migration (since the newer versions in node_modules
were never actually copied into thirdparty, they weren't used before).
2016-09-15 22:19:12 +12:00
Ingo Schommer
08adac8770 Updated npm-shrinkwrap in order to build lock file
Throw "extraneous modules" errors on npm-shrinkwrap@5.x,
even after `rm -rf node_modules; npm install`
2016-09-15 22:19:09 +12:00
Sam Minnee
1b527fca3f FIX Webpack handles images & fonts.
Responsibility for finding and referencing images and fonts is now
given to webpack. All the url references are now relative to the
component scss file, and point to font & images files in src/, rather
than assuming someone else will place them in dist.

This makes the source more modular, and makes it easier to, for
example, inline images are data URIs, or create a new build script that
builds several modules for a project in a single pass.

Workaround for bad font path in bundle.css:
ExtactTextPlugin didn’t work as well with a subfolder reference in the
filename. This is just a short-term fix and could probably be improved
to put bundle.css back in the styles subfolder.

Webpack handles images & fonts:
Responsibility for finding and referencing images and fonts is now
given to webpack. All the url references are now relative to the
component scss file, and point to font & images files in src/, rather
than assuming someone else will place them in dist.

This makes the source more modular, and makes it easier to, for
example, inline images are data URIs, or create a new build script that
builds several modules for a project in a single pass.

Clarify docs on spriting and webfonts:
We've decided to remove sprity since it comes with hundreds of dependencies,
and needs compilation within the "npm install" - dragging out the already overweight
install process, and making the resulting node_modules/ folder less portable between systems.
2016-09-15 22:19:09 +12:00
Sam Minnee
a6049ec383 FIX: Use chosen from npm package.
Downloading the package from github makes npm install a lot slower and
complicates the webpack build.
2016-09-15 22:19:09 +12:00
Sam Minnee
2e577ddb1d API Use Webpack
The bundle is generated by running “webpack” directly - gulp is no
longer needed as an intermediary. The resulting config is a lot shorter,
although more configuration is pushed into lib.js.

Modules are shared between javascript files as global variables.
Although this global state pollution is a bit messy, I don’t think it’s
practically any worse than the previous state, and it highlights the
heavy coupling between the different packages we have in place.
Reducing the width of the coupling between the core javascript and
add-on modules would probably be a better way of dealing with this than
replacing global variables with some other kind of global state.

The web pack execution seems roughly twice as fast - if I clear out my
framework/client/dist/js folder, it takes 13.3s to rebuild. However,
it’s not rebuilding other files inside dist, only the bundle files.

CSS files are now included from javascript and incorporated into
bundle.css by the webpack. Although the style-loader is helpful in some
dev workflows (it allows live reload), it introduces a flash of
unstyled content which makes it inappropriate for production.

Instead ExtractTextPlugin is used to write all the aggregated CSS
into a single bundle.css file. A style-loader-based configuration could
be introduced for dev environments, if we make use of the webpack live
reloader in the future.

Note that the following features have been removed as they don't appear to be
necessary when using Webpack:
 - UMD module generation
 - thirdparty dist file copying

LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late,
which leads e.g. to buttons being initialised without this added behaviour.
2016-09-15 22:19:05 +12:00
Ingo Schommer
65718770d6 Update to React v15.0 2016-09-06 21:39:20 +12:00
Ingo Schommer
0cc91d3b38 Use react-bootstrap-ss fork
The react-bootstrap project won't update their codebase for TWBS4 compat
until they're out of alpha (https://github.com/react-bootstrap/react-bootstrap/issues/1187).
So we have to work in a fork for the meantime.
2016-09-06 21:36:58 +12:00
Damian Mooyman
5cb4ab4a82 API Add PopoverField for extra-actions popup in react 2016-07-15 15:46:11 +12:00
Damian Mooyman
6e68f38efb API Update react sections to use react-router instead of page.js (#5796)
Fixes #5711
2016-07-14 17:51:01 +12:00
David Craig
83308689d5 API Initialise React controllers via routes (#5436) 2016-06-16 15:04:14 +12:00
Damian Mooyman
dbd17bd49a API Remove routing from silverstripe-component
BUG Fix page routing in subdirectory
BUG Fix top level admin sections not causing ajax load
2016-04-21 08:43:03 +12:00
Ingo Schommer
19de22f427 API Moved frontend assets into admin/client/
admin/javascript => admin/client
admin/javascript/src => admin/client/src/legacy (mostly)
admin/scss/_variables.scss => admin/client/styles/_variables.scss
admin/scss => admin/client/styles/legacy/
admin/css/editor.css => admin/client/dist/css/editor.css
admin/css/screen.css => admin/client/dist/css/bundle.css
admin/images => admin/client/dist/images
admin/images/sprites/src => admin/client/src/sprites
admin/images/sprites/dist => admin/client/dist/sprites
admin/font => admin/client/dist/font
2016-04-20 21:13:10 +12:00
Ingo Schommer
572d8427e0 Implement defaultData on silverstripe-backend 2016-04-18 13:59:18 +12:00
Damian Mooyman
5f2edb4e91 Fix ESLint issues, shrinkwrap, and missing image 2016-04-14 11:20:22 +12:00
Hamish Friedlander
31247a67bd API Replace baked-in and modified Chosen 0.9.8 with npm'ed in Chosen 1.5.1 2016-04-14 10:45:39 +12:00
Ingo Schommer
d7eed8fe8d Fix gulpfile.js ESLint syntax 2016-04-12 22:04:37 +12:00
Sam Minnee
b088efc6f9 MINOR: Test for backend.createEndpointFetcher() 2016-04-12 12:15:37 +12:00
Sam Minnee
21a1065329 NEW: Add createEndpointFetcher to backend
SilverStripeBackend now has a createEndpointFetcher method, described
in its docblock in more detail.

It’s based the asset-admin code for apiCallerFromEndpoint(). It’s
refactored and generalised into framework in order to provide a
general-purpose API for tying Javascript components to backend APIs.

@todo: tests
2016-04-11 21:43:21 +12:00
Ingo Schommer
3e575681ae Updated build artifacts 2016-04-07 23:50:12 +12:00
Ingo Schommer
0fadd7a15a Fix IE compat through babelify
Requires a polyfill for Object.assign
2016-04-06 10:57:57 +12:00
Ingo Schommer
34d40bed5f Add ESLint support
See https://github.com/silverstripe/silverstripe-framework/pull/5108
2016-04-06 10:43:33 +12:00
Ingo Schommer
ca25c78dda Updated babel dependency 2016-04-06 08:49:47 +12:00
Ingo Schommer
830523541a Updated react dependency 2016-04-06 08:49:47 +12:00
Ingo Schommer
2a5c92e491 Generic state management for React GridField
Renaming state operations from 'campaign' to 'record'.
Implemented API endpoint retrieval of GridField data.

Added more mock data into CampaignAdmin (rather than hardcoding in client),
to be replaced by CampaignAdmin API endpoint querying the real datamodel.

Using more native isomorphic-fetch instead of jQuery.ajax
to minimise dependencies and get into a more forward-thinking API.

Also catching errors in ReactJS API backend:
Emulate jQuery.ajax() behaviour. Might change at a later point
if we have a general purpose backend with a promise-based catch()
implementation.
2016-04-06 08:41:07 +12:00
Ingo Schommer
47dd7b48af Relative ES6 module paths
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/substack/node-browserify/issues/767
http://stackoverflow.com/questions/28078780/relative-paths-in-package-json
https://github.com/npm/npm/issues/1558
http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/vigetlabs/gulp-starter/issues/17#issuecomment-44292681
2016-04-06 08:36:38 +12:00
David Craig
ef97e0b52f Consolidated bundles, sourcemaps and watching
We don't want a bundle for each section, unnecessary network overhead
and too much boilerplate in defining build tooling.
2016-04-06 08:36:34 +12:00
Paul Clarke
0ca090a391 Add generic React components
Includes moving some components from AssetAdmin
2016-04-06 08:35:50 +12:00
David Craig
d0ffa7771c Client config 2016-04-05 22:43:29 +12:00
scott1702
2abe24f818 GridField and header styles 2016-04-05 22:42:15 +12:00
David Craig
f8c17bed3b CampaignAdmin and GridField React sections
Also removes watchify because it wasn't working.
Add SilverStripeBackend class used to fetch data from endpoints for the front-end
2016-04-05 22:42:13 +12:00
Ben Manu
5c7a6166b6 Moving thirdparty module to npm dependency - json-js. 2016-04-01 15:43:09 +13:00
David Craig
aa1aebd007 Implement client-side routing with Page.js
- Removes thirdparty dependency History.js
- Adds thirdparty dependency Page.js to manage client-side routing
- Adds a wrapper around Page.js for SilverStripe specific behaviour
- Increased minimum browser requirement to IE10. Native HTML History API routing requires IE10 or newer (necessitated by removal of History.js)
- PJAX pannel loading via now uses promises rather than callbacks
- Adds getClientConfig method to LeftAndMain which can be used to pass config from to the front-end client
2016-04-01 13:45:14 +13:00
Daniel Hensby
ed267d03bd Updating required node version 2016-03-16 21:54:07 +00:00
Ingo Schommer
2a3f4daa76 "npm run lock" command
Uses https://github.com/uber/npm-shrinkwrap instead of the built-in "npm shrinkwrap" since it works more reliably.
Specifically, "npm install" doesn't fail depending on node_modules/ being installed in the local cache or not.
It also makes npm-shrinkwrap.json easier to diff by more consistently ordering its output between runs.

If you need any convincing that this is a problem, look at the over 400 issues related to "shrinkwrap"
in https://github.com/npm/npm/search?q=shrinkwrap&type=Issues&utf8=%E2%9C%93
2016-02-29 20:50:15 +13:00
David Craig
5a42a4181a Added Bootstrap Alpha.2
- Managed by npm
- Created an `npm run css` task to compile
- Updated shrinkwrap
- Updated changelog
2016-02-23 11:11:24 +13:00
Damian Mooyman
f20ad434ce API Update TinyMCE to 4.x
API Allow HtmlEditorField to be individually configured
BUG Fix incorrect change detection
BUG Fix missing i18n files
2016-02-23 10:10:02 +13:00
scott1702
38b1c0a162 Replace Compass with gulp-sass 2016-02-16 18:35:57 +13:00
scott1702
2bf802a8cd Include React and related libraries in framework 2016-02-15 16:05:55 +13:00
David Craig
2140025c20 Implement RFC-7 JavaScript module loader
- Adds ES6 support via Babel
- Transforms existing JavaScript to UMD modules
- Adds module bundling via Browserify
- Existing JavaScript converted to UMD modules
- lib.js and leftandmain.js are bundled using browserify
- JavaScript minifying of bundles handed by gulp
2016-01-26 11:39:20 +13:00
David Craig
254b942737 Adds npm for managing client-side dependencies
- Includes a package.json file with build and CI scripts
- Includes shrinkwrap file for locking dependency version
- Includes Gulp for running build tasks
- Includes a 'build' task for copying library files from node_modules to thirdparty
- Includes a 'sanity' task for makes sure library files in thirdparty match what's in node_modules
- Includes updates to .travis.yml (new JS_SANITY_CHECK flag) to run the sanity task
2016-01-13 09:23:47 +13:00