Skip to content

Commit

Permalink
Updates to PayGroup + Bump dependencies + Remove grunt-sass/node-sass (…
Browse files Browse the repository at this point in the history 
…#755)

* continue iterating PayGroup

* Bump dependencies + remove grunt-sass/node-sass (Closes #638) + misc

* move classes out of _colors and into _typography to prevent duplication in component css

* PR review changes
  • Loading branch information
@taoeffect @sandrina-p
taoeffect authored and sandrina-p committed Nov 2, 2019
1 parent f24e6c9 commit babd47e
Show file tree
Hide file tree
Showing 102 changed files with 2,635 additions and 2,507 deletions.
189 changes: 109 additions & 80 deletions .Gruntfile.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,19 @@ import flowRemoveTypes from 'flow-remove-types'
import json from 'rollup-plugin-json'
import globals from 'rollup-plugin-node-globals'
import { eslint } from 'rollup-plugin-eslint'
import css from 'rollup-plugin-css-only'
import scssVariable from 'rollup-plugin-sass-variables'
import sass from 'rollup-plugin-sass'
import { createFilter } from 'rollup-pluginutils'
import transpile from 'vue-template-es2015-compiler'
const compiler = require('vue-template-compiler') // NOTE: import doesnt work here?

// import collectSass from 'rollup-plugin-collect-sass'
// import sass from 'rollup-plugin-sass'
// import scss from 'rollup-plugin-scss'
// import browserifyPlugin from 'rollup-plugin-browserify-transform'
// https://github.com/4lejandrito/rollup-plugin-browsersync
import { chompLeft, chompRight } from '~/shared/string.js'

// import rollup from 'rollup'
const compiler = require('vue-template-compiler') // NOTE: import doesnt work here?
const rollup = require('rollup')
const chalk = require('chalk')
const fs = require('fs')
const path = require('path')
const url = require('url')
const util = require('util')
const readFileAsync = util.promisify(fs.readFile)

const development = process.env.NODE_ENV === 'development'
const livereload = development && (parseInt(process.env.PORT_SHIFT || 0) + 35729)
Expand All @@ -37,6 +32,24 @@ const distAssets = `${distDir}/assets`
const distJS = `${distAssets}/js`
const distCSS = `${distAssets}/css`

const sassOptions = {
// https://github.com/sass/dart-sass#javascript-api
sourceMap: development,
outputStyle: development ? 'expanded' : 'compressed',
includePaths: [
path.resolve('./node_modules'), // so we can write @import 'vue-slider-component/lib/theme/default.scss'; in .vue <style>
path.resolve('./frontend/assets/style') // so we can write @import '_variables.scss'; in .vue <style> section
// but also for compatibility with resolveScssFromId() to prevent errors like this during the build process:
// couldn't resolve: @import "_reset"; in group-income-simple/frontend/assets/style/main.scss
],
importer (url, prev, done) {
// so we can write @import "@assets/style/_variables.scss"; in the <style> section of .vue components too
return url.indexOf('@assets/') !== 0
? null
: { file: path.resolve('./frontend/assets', chompLeft(url, '@assets/')) }
}
}

module.exports = (grunt) => {
require('load-grunt-tasks')(grunt)

Expand All @@ -53,11 +66,6 @@ module.exports = (grunt) => {
options: { livereload },
files: [`${distJS}/main.js`]
},
css: {
options: { livereload },
files: ['frontend/assets/**/*.{sass,scss}'],
tasks: ['sass']
},
html: {
options: { livereload },
files: ['frontend/**/*.html'],
Expand All @@ -77,26 +85,6 @@ module.exports = (grunt) => {
}
},

sass: {
options: {
implementation: require('node-sass'),
sourceMap: development,
// https://github.com/vuejs/vueify/issues/34#issuecomment-161722961
// indentedSyntax: true,
// sourceMapRoot: '/',
outputStyle: development ? 'nested' : 'compressed'
},
dev: {
files: [{
expand: true,
cwd: 'frontend/assets/style',
src: ['*.{sass,scss}', '!_*/**'],
dest: distCSS,
ext: '.css'
}]
}
},

copy: {
node_modules: {
cwd: 'node_modules',
Expand Down Expand Up @@ -198,7 +186,7 @@ module.exports = (grunt) => {
sbp('backend/pubsub/setup', require('http').createServer(), true)
}
if (!grunt.option('skipbuild')) {
grunt.task.run(['exec:eslint', 'exec:puglint', 'exec:stylelint', 'copy', 'sass', rollup])
grunt.task.run(['exec:eslint', 'exec:puglint', 'exec:stylelint', 'copy', rollup])
}
})

Expand Down Expand Up @@ -296,8 +284,11 @@ module.exports = (grunt) => {
let done = this.async()
const watchFlag = this.flags.watch
const watchOpts = {
clearScreen: false,
input: 'frontend/main.js',
watch: {
clearScreen: false,
chokidar: true
},
output: {
format: 'system',
dir: distJS,
Expand All @@ -316,20 +307,21 @@ module.exports = (grunt) => {
plugins: [
alias({
// https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build
resolve: ['.vue', '.js', '.svg'],
vue: path.resolve('./node_modules/vue/dist/vue.esm.js'),
'~': path.resolve('./'),
'@controller': path.resolve('./frontend/controller'),
'@model': path.resolve('./frontend/model'),
'@utils': path.resolve('./frontend/utils'),
'@views': path.resolve('./frontend/views'),
'@pages': path.resolve('./frontend/views/pages'),
'@components': path.resolve('./frontend/views/components'),
'@containers': path.resolve('./frontend/views/containers'),
'@view-utils': path.resolve('./frontend/views/utils'),
'@assets': path.resolve('./frontend/assets'),
'@svgs': path.resolve('./frontend/assets/svgs')

resolve: ['.vue', '.js', '.svg', '.scss'],
entries: {
'vue': path.resolve('./node_modules/vue/dist/vue.esm.js'),
'~': path.resolve('./'),
'@controller': path.resolve('./frontend/controller'),
'@model': path.resolve('./frontend/model'),
'@utils': path.resolve('./frontend/utils'),
'@views': path.resolve('./frontend/views'),
'@pages': path.resolve('./frontend/views/pages'),
'@components': path.resolve('./frontend/views/components'),
'@containers': path.resolve('./frontend/views/containers'),
'@view-utils': path.resolve('./frontend/views/utils'),
'@assets': path.resolve('./frontend/assets'),
'@svgs': path.resolve('./frontend/assets/svgs')
}
}),
resolve({
// we set `preferBuiltins` to prevent rollup from erroring with
Expand All @@ -338,39 +330,29 @@ module.exports = (grunt) => {
preferBuiltins: false
}),
json(),
// TODO: probably don't need browserifyPlugin, just implement ourselves here as a raw object
// per: https://rollupjs.org/guide/en#plugins-overview
// browserifyPlugin(script2ify, { include: '*.{vue,html}' }),
scssVariable(),
// note there is a sourcemap bug for component.css: https://github.com/thgh/rollup-plugin-css-only/issues/10
css({ output: `${distCSS}/component.css` }), // SUCCESS - spits out what's in .vue <style> tags
// collectSass({ importOnce: true, extract: `${distCSS}/collectSass.css` }), // FAIL - flowtypes conflict
// sass({ output: `${distCSS}/sass.css` }), // FAIL - flowtypes conflict
// scss({ output: `${distCSS}/scss.css` }), // FAIL - produces empty bundle, probably only
// useful in the <script> section, i.e.
// <script>import 'foo.scss' ...
transformProxy({
// NOTE: this completely ignores outFile in the sassOptions
// for some reason, so sourcemaps aren't generated for the SCSS :-\
plugin: sass({ output: `${distCSS}/main.css`, options: sassOptions }),
match: /\.scss$/,
recurse: true
}),
eslint({ throwOnError: true, throwOnWarning: true }),
svgLoader(),
VuePlugin({
// https://rollup-plugin-vue.vuejs.org/options.html
// https://github.com/vuejs/rollup-plugin-vue/blob/master/src/index.ts
// https://github.com/vuejs/vue-component-compiler#api
needMap: false,
css: false,
style: {
preprocessOptions: {
scss: {
// https://github.com/sass/node-sass#includepaths
includePaths: [
// so that you can write things like this inside component style sections:
// @import 'vue-slider-component/lib/theme/default.scss';
path.resolve('./node_modules')
]
}
transformProxy({
plugin: VuePlugin({
// https://rollup-plugin-vue.vuejs.org/options.html
// https://github.com/vuejs/rollup-plugin-vue/blob/master/src/index.ts
// https://github.com/vuejs/vue-component-compiler#api
needMap: false, // see: https://github.com/okTurtles/group-income-simple/pull/629
// css: false, // to prevent loading a massive CSS file, we keep the CSS in components that can be split up
style: {
preprocessOptions: { scss: sassOptions }
}
}
}),
match: /\.(scss|vue)$/,
recurse: false
}),
// VuePlugin(),
flow({ all: true }),
commonjs({
// NOTE: uncommenting this saves ~1 second off build process
Expand Down Expand Up @@ -419,6 +401,53 @@ module.exports = (grunt) => {
}
})
})

function resolveScssFromId (id: string): ?string {
if (id.indexOf('@assets/') === 0) {
return path.resolve('./frontend/assets', chompLeft(id, '@assets/'))
}
for (const incPath of sassOptions.includePaths) {
const res = path.join(incPath, id)
if (fs.existsSync(res)) return res
}
}

const watchScss = async function (source: string, filename: string, recurse: boolean) {
try {
for (const [match, id1, id2] of source.matchAll(/(?<!\/\/.*)(?:import ['"](.+?\.scss)['"]|@import ['"](.+?)['"];)/g)) {
// sometimes the @imports in .scss files will contain the extension, and sometimes they won't
const resolvedPath = resolveScssFromId(id1 || `${chompRight(id2, '.scss')}.scss`)
if (resolvedPath) {
grunt.verbose.debug(chalk`addWatchFile {cyanBright ${match}} => {cyanBright ${resolvedPath}}`)
this.addWatchFile(resolvedPath)
if (recurse) {
await watchScss.call(this, await readFileAsync(resolvedPath, 'utf8'), resolvedPath, recurse)
}
} else {
grunt.log.error(chalk`couldn't resolve: {cyanBright ${match}} in {cyanBright ${filename}}`)
}
}
} catch (e) {
grunt.log.error(`watchScss for ${filename} (typeof source = ${typeof source}):`, e.message, source)
throw e
}
}
// We use 'transformProxy' to intercept calls to the plugin's transform function,
// so that we can watch .scss files for changes and rebuild the bundle + refresh browser
const transformProxy = function (opts: { plugin: Object, match: RegExp, recurse: boolean }) {
return new Proxy(opts.plugin, {
get: function (obj, prop) {
if (prop !== 'transform') return obj[prop]
return async function (source: string, filename: string) {
if (opts.match.test(filename)) {
grunt.verbose.debug(chalk`{bold TRANFORM:} ${filename}`)
await watchScss.call(this, source, filename, opts.recurse)
}
return obj.transform.call(this, source, filename)
}
}
})
}
}

// Using this instead of rollup-plugin-flow due to
Expand Down
18 changes: 9 additions & 9 deletions backend/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,26 @@ global.logger = function (err) {
err.stack && console.error(err.stack)
}

const dontLog = { 'backend/pubsub/setup': true }

function logSBP (domain, selector, data) {
console.log(chalk.bold(`[sbp] ${selector}`), data)
if (!dontLog[selector]) {
console.log(chalk.bold(`[sbp] ${selector}`), data)
}
}

// ;[].forEach(domain => sbp('sbp/filters/domain/add', domain, logSBP))
;[
'backend/server/handleEntry',
'backend/db/streamEntriesSince'
].forEach(sel => sbp('sbp/filters/selector/add', sel, logSBP))
;['backend'].forEach(domain => sbp('sbp/filters/domain/add', domain, logSBP))
;[].forEach(sel => sbp('sbp/filters/selector/add', sel, logSBP))

module.exports = new Promise((resolve, reject) => {
sbp('okTurtles.events/on', SERVER_RUNNING, function () {
console.log(chalk.bold('backend startup sequence complete.'))
resolve()
})
// call this after we've registered listener for SERVER_RUNNING
require('./server.js')
})

// call this after we've registered listener for SERVER_RUNNING
require('./server.js')

const shutdownFn = function () {
sbp('okTurtles.data/apply', PUBSUB_INSTANCE, function (primus) {
console.log('message received in child, shutting down...')
Expand Down
8 changes: 6 additions & 2 deletions backend/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ route.GET('/events/{contractID}/{since}', {}, async function (request, h) {

route.POST('/name', {
validate: {
payload: {
payload: Joi.object({
name: Joi.string().required(),
value: Joi.string().required()
}
})
}
}, function (request, h) {
try {
Expand Down Expand Up @@ -107,6 +107,10 @@ route.GET('/latestHash/{contractID}', {}, async function (request, h) {
}
})

route.GET('/time', {}, function (request, h) {
return new Date().toISOString()
})

// file upload related

// TODO: if the browser deletes our cache then not everyone
Expand Down
33 changes: 0 additions & 33 deletions frontend/assets/style/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,36 +30,3 @@ $danger_1: var(--danger_1);
$danger_2: var(--danger_2);

$colors: "primary", "success", "warning", "danger", "general";

.has-text-0 {
color: $text_0;
}

.help,
.has-text-1 {
color: $text_1;
}

@each $name in $colors {
.has-text-#{$name} {
color: var(--#{$name}_0);
}

.has-background-#{$name} {
background-color: var(--#{$name}_2);
}
}

.has-text-white {
color: $white;
}

// ---------- SVGs

// NOTE: This is only a POC to handle "themable" illustrations.
// Final solution should be done at #665
.svg-hello {
path:nth-child(1) {
fill: $primary_1;
}
}
Loading

0 comments on commit babd47e

Please sign in to comment.