The accurapp from accurat

Update README instructions about webhook policy

ciao @devs, chi configura un deploy su Netlify, per piacere NON aggiunga un nuovo Slack Hook ma usi sempre questo:
https://accurat.slack.com/services/....
Hook: ...

So we need to change the instructions in the README accordingly 🙃

Show help if app name is missing

Instead of throwing an error, it's better to show the usage help if missing on the CLI

$ create-accurapp
path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1146:7)
    at Object.<anonymous> (/Users/marco/.config/yarn/global/node_modules/create-accurapp/index.js:91:21)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:420:7)

ESLint: error instead of warning for some cases

is not defined should be an error instead of a warning

json-perf-loader, for improved JSON parsing

Suggestion: use json-perf-loader instead of the default webpack JSON loader.

Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript. This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux stores). Instead of inlining the data as a JavaScript object literal.

As long as the JSON string is only evaluated once, the JSON.parse approach is much faster compared to the JavaScript object literal

I've asked if that is still useful for webpack v4 here, just to be sure it makes sense :)

Add lint commamd

In the package.json scripts, so that you can check what's wrong by running yarn lint

SVG Loader

https://github.com/boopathi/react-svg-loader

In production, transpile the entire bundle to prevent leaking ES6 in production

Should be enough to remove exclude: 'node_modules' from the babel config of the prod build configuration.

Support @typescript-eslint

When it will be more mature

https://github.com/typescript-eslint/typescript-eslint

Examples

facebook/create-react-app#6513
facebook/create-react-app#6701

Add README.md for every npm published packages

show to console also the public machine IP for mobile testing

like browserSync does:

🚨 Upgrade eslint to v4

https://github.com/eslint/eslint.github.io/blob/master/docs/4.0.0/user-guide/migrating-to-4.0.0.md

Also check out

https://github.com/buildo/eslint-config

Replace lerna with yarn workspaces

https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/

Lerna will still handle the publishing.

WIP branch is here

Currently waiting on this issue to be resolved

README outdated: suggested SASS configuration doesn't work

The configuration described here gives now an error:

https://github.com/accurat/accurapp#customizing-webpack

const { buildWebpackConfig } = require('webpack-preset-accurapp')
const { sass } = require('webpack-blocks')

module.exports = buildWebpackConfig([
  sass(),
])

Wrong `Unknown script "build"`

https://github.com/accurat/accurapp/blob/master/packages/accurapp-scripts/bin/scripts.js#L31

The try catch gives NOT_FOUND even if a sub-sub-module of build.js has a module not found.

Would be better to use require.resolve and/or fs.exists() to check for the existence of the script/

cc @marcofugaro @nkint

Drop console messages in production

What if we use drop_console option on uglifyjs to remove unwanted console logs in production?
https://github.com/mishoo/UglifyJS2#compressor-options

Remove browser globals from ESLint

Use something similar to eslint-config-standard's globals config to enforce browser globals to be declared with window. or document.

Add script to build for a reusable library

Resources:

https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c

https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87

https://github.com/DimitriMikadze/create-react-library

https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb

Add linting scripts for use in CI

emulate this:

"scripts": {
    "lint": "node node_modules/eslint/bin/eslint.js src/",
    "lint:errors": "node node_modules/eslint/bin/eslint.js --quiet src/"
}

SVG files names beginning with a number cause an error in SVGO

For SVG imported like this:

import { ReactComponent as SvgIcon } from './123-abc.svg'

Webpack gives this error:

!!! Errors in compiling:

 • ./src/123-abc.svg
   TypeError: Cannot read property 'each' of undefined
       at Array.forEach (<anonymous>)
       at Array.forEach (<anonymous>)

The solution is start the SVG filename with a letter.

This is due to the SVGO plugin which has a bug prefixing CSS classes names with the filename, and CSS classes cannot begin with a number. @ilariaventurini is filing an issue (and a fix) on SVGO repo right now! Both for the non-meaningful error of numeric classes, and for the filename-prefixing code.
Then we should alert the SVGR team, and then update accurapp's SVGR version.

In the meanwhile remember to rename the SVGs and maybe we should add an alert in the accurapp README.

🚧 🚨 Interesting ESLint rules and plugins

@marcofugaro @lucafalasco @nkint @markov00

Let's list all the eslint related proposals in this issue.

One proposal per post, votes through reactions.

Add MIT license text to every published packages

Randomly generated favicon

Default react favicon sucks. What about something like this with random colors?

Much nicer to share demos with clients 🙃

Add react-refresh

facebook/create-react-app#8582

Staging deploys should block search engines

The solution is easy: adding a robots.txt in the build dir.
The problem is to be extra-sure we don't add that in production, but only in staging env!

We can't be sure about this since the same yarn build command is used, and the NODE_ENV variable is apparently not correctly set (@marcofugaro told me, but is that true?).
Seems like the best option could be to use something like:

[[ ! -v GENERATE_SOURCEMAP ]] && [[ -v CI ]] && echo 'User-agent: *\nDisallow: /' > build/robots.txt

Remove async/await from babelrc in development

Refactor the babelrc when babel7 comes out.

Also add babel-macros
https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros

And use browserlist
babel/babel-preset-env#149

Check sourcemaps

Detect if a `package-lock.json` is present, and error out blocking everything if true

Is your feature request related to a problem? Please describe.

Sometimes for developers overlook, an npm command gets run in the repo and a package-lock.json gets created even if a yarn.lock is already present.
This creates problems in Netlify and other auto-deploy platforma, because they choose the tool depending on which files they find.

Describe the solution you'd like

Any accurapp command (start / build / lint) could check: if package-lock.json AND yarn.lock are present, block everything and alert with a big red flashy warning.
Solution for the user: delete one of the two files (preferably the NPM one)

Thoughts?

Make devServer options completely configurable

Every property should be overridable either in package.json or in webpack.config.js

Installing the package does not work

Tried both with npm and yarn

Use Bitbucket API to automate Pipelines repo variables

https://developer.atlassian.com/bitbucket/api/2/reference/resource/repositories/%7Busername%7D/%7Brepo_slug%7D/pipelines_config/variables/#post

Add BUILD_PATH env variable to customise naming of production folder

Would be nice to change the path of the production folder, in my use case we have to create different folders at build time for each different language.
Example:

build/
-- app.js
-- index.html
-- assets/
-- fr/
---- app.js
---- index.html
-- de/
---- app.js
---- index.html

BUILD_PATH=build/fr

accurapp/packages/webpack-preset-accurapp/index.js

Line 300 in 7c87d0d

path: path.resolve('./build'),

Replace accurapp logo with a smaller one

Reduce the used logo to a more minimal one so that with small console is readable.
Maybe changing the ASCII art font or just using the /|||/| logo.

Add github actions

Don't check for newer accurapp versions during CI build

Generator star spacing rule

We currently have a conflict between the rules in eslint and the formatting in prettier. In particular eslint forces to put a space before the generator function * fetchOutsample() and prettier defaults to function* fetchOutsample(). I like the prettier version more and would remove the eslint rule but I wanted to raise the issue to @marcofugaro first. For now you can do:

// .eslintrc
{
  "extends": "eslint-config-accurapp",
  "rules": {
    "generator-star-spacing": 0
  }
}

Treemap for webpack statistics

CSV loader

Now done with:

yarn add -D csv-loader

and in webpack.config.js:

const buildWebpackConfig = require('webpack-preset-accurapp')
module.exports = buildWebpackConfig([
  (context) => ({
    module: {
      loaders: [
        {
          test: /\.csv$/,
          loader: 'csv-loader',
          options: {
            dynamicTyping: true,
            header: true,
            skipEmptyLines: true,
          },
        },
      ],
    },
  }),
])

Why BSD-3-Clause for accurapp-script package?

Are we reusing something from the create-react-app that needs BSD license?

in [email protected] createEnvFile causes netlify to break if there is no .env.example

There should be a check or, at least, a clearer error message (createEnvFile is called if process.env.CI === true)

Missing the `fs-extra` module used by build.js

$ yarn build
yarn build v0.21.3
$ accurapp-scripts build
module.js:472
    throw err;
    ^

Error: Cannot find module 'fs-extra'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/marco/Workspaces/Accurat/tools/prova/node_modules/accurapp-scripts/scripts/build.js:22:10)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
error Command failed with exit code 1.

webpack always refreshes the page, instead of using Hot Module Replacement;
some imports fail with no error, and the variable being imported results null or undefined;
TypeScript crazies put and laptop goes BOOOM.

Describe the solution you'd like

Add circular-dependency-plugin to Webpack by default, to error out (or a BIG warning, but I prefer error) in case of a circular dependency.

Related project: madge

cc @ivanross (for problem 3 and for the discovery of madge)
cc @pitou (for problem 2)

Make two SVGs each with a clipPath with the same ID
Pass them in SVGO by importing them with accurapp as *.color.svg

Actual behavior

The two IDs clashes, because they are note rewritten, and the second clipPath does not work.

Expected behavior

The IDs should be renamed and prefixed (with filenames).
Easy to do just removing this line:

accurapp/packages/webpack-preset-accurapp/customBlocks.js

Line 193 in 0a69c5d

{ prefixIds: false },

@marcofugaro do you remember why for *.color.svg the IDs are not prefixed?

accurat / accurapp Goto Github PK

accurapp's People

Contributors

Stargazers

Watchers

Forkers

accurapp's Issues

Recommend Projects

Recommend Topics

Recommend Org