WIP: Upgrade Semantic Ui to use Semantic-UI-Less #130

andrewleyva · 2017-10-20T17:30:00Z

problem statement

The build is heavy and slow and is integrated in such a way that updates could overwrite some of our code.

solution

Use Semantic-UI-Less instead of Semantic-UI package to pull in CSS for Semantic to bundle with our additional components.

Remove Semantic-UI package and folder (removing Gulp entirely)
Add semantic-ui-less and less packages to npm
Update Builder Script to build less with less.render and ship to Lib folder

Use Less-loader to replace the old watcher

Notes:

Currently we must use Less v2.7.2 because the latest (3.0.0-alpha.3) results in build errors for semantic-ui. And issue is open: Semantic-Org/Semantic-UI-LESS#30 (comment)

…e build until semantic-ui-less is implemented

… correctly set @imagePath and @fontPath in two locations default and tripwire

cdaringe · 2017-10-20T18:00:54Z

scripts/builder.js

@@ -25,8 +26,7 @@ module.exports = {
  get coverageDir () { return path.join(this.projectRoot, 'coverage') },
  get distDir () { return path.join(this.projectRoot, 'lib') },
  get projectRoot () { return path.resolve(__dirname, '..') },
-  get semanticDist () { return path.join(this.semanticPath, 'dist') },
-  get semanticPath () { return path.join(this.projectRoot, 'semantic') },
+  get semanticPath () { return path.join(this.projectRoot, 'semantic-ui-less') },


look into require.resolve

require.resolve('semantic-ui-less') ==> // /Users/andrew/octagon/node_modules/semantic-ui-less/index.less

needed to use the full path

cdaringe · 2017-10-20T18:07:00Z

scripts/builder.js

-    console.log(stdout)
+    console.log('Building Semantic Less')
+    const lessInputSource =path.join(this.semanticPath, 'semantic.less')
+    const lessInputStream = fs.readFileSync(lessInputSource).toString()


await fs.readFile(...)

… to use await

…the files.

…src. Adjusted script to use symlinks to pull in semantic-ui-less from node_modules and our theme info form src

….md, updated build script to work with less-loader. Styleguidist using Less-Loader doesn't like some files to be symlinked. Replaced most files in builder to be compied. Themes folder is symlinked so that changes you make in src are hotloaded. Theme.config was not able to be symlinked and if changes are made to it the project must be rebuilt.

wa11-e · 2017-10-27T21:08:06Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29593329.surge.sh

wa11-e · 2017-10-27T22:45:19Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29595186.surge.sh

wa11-e · 2017-10-28T00:22:22Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29596187.surge.sh

wa11-e · 2017-10-28T00:28:21Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29596237.surge.sh

wa11-e · 2017-10-28T00:37:35Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29596284.surge.sh

cdaringe · 2017-10-28T00:42:32Z

@andrewleyva (& @ggascoigne) updates!

i moved the tmp build dir to a true sys-wise tmp dir
given your CSS build is pretty fast and because i parallelized a lot of the steps, i was able to drop less-loader, and just do a full CSS rebuild on every change from src/semantic-ui-theme, vs watching the temp dir less file. if it becomes problematic, no worries, let's port it back. it honestly is probably a little slower, but, it's simpler. "changed theme? then new theme dumped into lib"

take a look at the static styleguide from @wa11-e (yours, or mine).

it looks like the icon on the sortable table isn't rendering.
if you run npm install && npm test in the latest branch, there are some actual diffs im observing too. not much! just some smallies. we need to loosen the image diff threshold in the test :$
- button padding-left|right maybe have both increased? we should see what's up w/ that.

…d should have been relative

wa11-e · 2017-10-31T18:27:11Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29667143.surge.sh

wa11-e · 2017-10-31T23:41:02Z

Woohoo! new surge deployment available for viewing! 🎉 surgereview29675775.surge.sh

andrewleyva · 2017-11-01T17:08:22Z

Addresses issue #119.

ggascoigne · 2017-11-01T17:15:46Z

I'm curious what the anticipated impact on TOC and Connect v4 will be with this change.

andrewleyva · 2017-11-01T17:45:13Z

@cdaringe and I ran Backstop and investigated any differences. This really just cleans up the build on the Octagon side. I do have plans to address the Bundle size, issue #120, which should have more of an impact.

ggascoigne · 2017-11-01T17:46:56Z

Cool, I'll pull it into TOC when I return and run backstop there :) That'll be the real test 😁

Andrew Leyva added 5 commits October 19, 2017 17:40

Removed semantic from package.json and semantic folder this breaks th…

a608729

…e build until semantic-ui-less is implemented

Added Semantic-ui-less to package and copied folder into root

4537895

Created theme.config, added Tripwire theme, updated site.variables to…

d46a713

… correctly set @imagePath and @fontPath in two locations default and tripwire

Updated start script to only call build process

a340d45

Updated builder to compile semantic.css from semantic-ui-less

04249a7

cdaringe reviewed Oct 20, 2017

View reviewed changes

Andrew Leyva added 9 commits October 20, 2017 17:49

Added fs-symlink package. Could use fs.link, but fs-symlink allows me…

df75f22

… to use await

Updated semantic-ui-less to use symlinks instead of copies of all of …

70df9bd

…the files.

Remove Ripcord, no longer necessary

10c4c05

Removed semantic-ui-less dir and moved our config files and theme to …

4d4eebc

…src. Adjusted script to use symlinks to pull in semantic-ui-less from node_modules and our theme info form src

Added less-loader and upgraded react-styleguidist

9fe79d8

start.js just builds now. Watcher is less-loader

44addb9

Fixed error in start.js and cleaned up code

e247585

Updates for Standard Linter

203b456

feat(build): parallel build steps

ff452ae

fix(styleguide): simple css theme rebuilds

8292f8c

fix(builder): chain builds

aa43390

fix(test): correct static styleguide build

536da7e

Updated to @fontPath and @imagePath overwrites. They were absolute an…

ee0e695

…d should have been relative

cdaringe added 2 commits October 31, 2017 16:34

wip(test): docker testing

e73e73a

fix(test.js): lint.

4c0577d

cdaringe merged commit 8ad42db into master Oct 31, 2017

cdaringe deleted the feat/suir-cleanup branch October 31, 2017 23:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Upgrade Semantic Ui to use Semantic-UI-Less #130

WIP: Upgrade Semantic Ui to use Semantic-UI-Less #130

andrewleyva commented Oct 20, 2017

cdaringe Oct 20, 2017

andrewleyva Oct 27, 2017

cdaringe Oct 20, 2017

andrewleyva Oct 27, 2017

wa11-e commented Oct 27, 2017

wa11-e commented Oct 27, 2017

wa11-e commented Oct 28, 2017

wa11-e commented Oct 28, 2017

wa11-e commented Oct 28, 2017

cdaringe commented Oct 28, 2017

wa11-e commented Oct 31, 2017

wa11-e commented Oct 31, 2017

andrewleyva commented Nov 1, 2017

ggascoigne commented Nov 1, 2017

andrewleyva commented Nov 1, 2017

ggascoigne commented Nov 1, 2017

WIP: Upgrade Semantic Ui to use Semantic-UI-Less #130

WIP: Upgrade Semantic Ui to use Semantic-UI-Less #130

Conversation

andrewleyva commented Oct 20, 2017

problem statement

solution

Notes:

cdaringe Oct 20, 2017

Choose a reason for hiding this comment

andrewleyva Oct 27, 2017

Choose a reason for hiding this comment

cdaringe Oct 20, 2017

Choose a reason for hiding this comment

andrewleyva Oct 27, 2017

Choose a reason for hiding this comment

wa11-e commented Oct 27, 2017

wa11-e commented Oct 27, 2017

wa11-e commented Oct 28, 2017

wa11-e commented Oct 28, 2017

wa11-e commented Oct 28, 2017

cdaringe commented Oct 28, 2017

wa11-e commented Oct 31, 2017

wa11-e commented Oct 31, 2017

andrewleyva commented Nov 1, 2017

ggascoigne commented Nov 1, 2017

andrewleyva commented Nov 1, 2017

ggascoigne commented Nov 1, 2017