factorial-io/factorial-frontend-stack

Modern frontend tooling with minimal configuration

factorial-frontend-stack's Issues

Fix: pattern lab build does not exit

IS

1. When running yarn run build build CSS, JS and patternlab are build.
2. But the process idles after > php core/console --generate, but does not exit.

SHOULD
The process should exit.

Investigate lerna versioning mode

IS:
Currently all packages have diferent version numbers

SHOULD:
Alle packages should be released with the same version for compatibility and ease of use.

Feat: Provide SVG sprites loader

Generating SVG sprite map from assets.

SEE:
https://github.com/kisenka/svg-sprite-loader

Feat: Conventional change logs

Automate parts of the release process through conventional commits and changelog / release generation.
https://github.com/lerna/lerna/tree/master/commands/version#--create-release-type

Use webpack

Tree shaking, HMR, and whatnot ...

Feat: post css custom properties preserve should be false

For as long as we don't change custom properties at run time, we should not expose CSS custom properties in the build.

SEE
https://github.com/postcss/postcss-custom-properties

BUSINESS VALUE

• Smaller build
• Easier debugging

WARNING
This is a potential breaking change at project level.

include() in yaml files not working

There seems to be a problem when using the patternlab --watch task and using include() in YAML files.

Already bug reported for this in the data-transform plugin used for this:
aleksip/plugin-data-transform#16

I think for now we have to configure this differently, not using watch task but php core/console --generate everytime there is a file change.

Review live-reloading task

It is currently not completely transparent for users, when a new build/reload is triggered.

eslint config is not correctly exposed to IDEs

I would be interested if anyone can get the linting working correctly in an IDE.

I tried to add the .eslintrc.js file as described here.
If I understand what is happening there correctly, this file should export a valid eslint config with all settings that are used in the neutrino middlewares.

I get this error when eslint tries to load the config:
Cannot read config file: /Users/kris/code/fe-stack-test/.eslintrc.js Error: Cannot find module '.neutrinorc.js'

Is this working in atom, vs code or sublime for anyone?

Only working with local neutrino install?

I tried to run this with a global neutrino install (8.3.0) but that doesn´t work.

12:37:56 > yarn start yarn run v1.7.0 $ yarn run neutrino start --use @factorial/frontend-stack-core error Command "neutrino" not found. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Adding neutrino locally with yarn add neutrinofor example works though. Not sure if it is as intended?

Docs: Provide example for changing glob options

UC:
The glob|path to test files should be configurable.

Task:
Verify that this is possible and provide an example how to do it.

Refactor core to allow pick and choosing of features

While working on the svg-sprite-loader middleware I noticed that when not including the core package, a lot of basic configuration is not happening like the entry points etc.
This means that core is a dependency that is always needed and for example the new svg-sprite-loader can not work without it.

My idea is to structure the packages in a way where we have a very basic setup packag, that just configures webpack in terms of source, public folder, entry points etc.
Additionally we would have a bunch of packages for CSS conversion, JS conversion, svg-spritemap generation, font loading, image loading, dev-server, (...). Those can then be added to a project as needed.

Thoughts?

Chore: Resolve webpack-file-watcher warnings

https://github.com/sap9433/filewatcher-webpack-plugin/issues

• The package appears to be unpopular and not actively maintained.
• its dependencies are outdated and contain security warnings.

It appears to be only a wrapper on top of

https://github.com/paulmillr/chokidar#api

Export tasks as modules

• Export tasks that can be installed using npm
• Accept configuration object for paths etc.

Document custom entry point

Could be good documenting how we can set a custom "entry point" instead of ./src/index.js.

Maybe we could add in the Readme something like this:

Add in the .neutrinorc.js this code if our entry point is ./source/index.js:

module.exports = {
  use: [
    "@factorial/frontend-stack-core"
  ],
  options: {
    source: "source",
    output: "source/build", // NB: The whole build needs to be under version control currently.
    mains: {
      index: "index.js"
    }
  }
};

styleftm adds unwanted linebreaks

See masaakim/stylefmt#214

Don't expect gulp to be installed globally

• Add gulp to dev dependencies

Allow multiple entry points

When passing multiple entry points to mains, they should be respected.

SEE:
https://neutrinojs.org/customization/#optionsmains
https://github.com/factorial-io/factorial-frontend-stack/blob/master/packages/core/index.js#L79

neutrino setup doesn't transpile ES6 code as expected.

When using ES6 (e.g. arrow functions or new keywords such as let or const) in your codebase and doing yarn run neutrino start, the ES6 code is not getting transpiled to ES5.

I've used this snippet to test.

const test = () => {
  let a = 2;
  a = 3;

  return a;
};

Feat: Make ENV settings for path configurable

UC:
We need different path settings for our build on local and remote for historic reasons.

IS
hardcoded in CONSTANT at https://github.com/factorial-io/factorial-frontend-stack/blob/master/packages/pattern-lab/index.js#L8

SHOULD:
this should be configurable.

Feat: Make jsdoc comment blocks mandatory

Configure eslint to enforce jsdoc comment blocks before methods and functions.

Add function to scaffold a project

We should consider creating a template so projects can be scaffolded with yarn create.

https://neutrinojs.org/installation/create-new-project.html#scaffold-a-neutrino-project

Provide export PostCSS variables

Extend configuration with a middleware that exports css variables, so we can import or display them in pattern lab.

SEE:
https://github.com/nahody/postcss-export-vars
https://github.com/factorial-io/factorial-frontend-stack/blob/master/packages/core/index.js#L140

Downgrade gulpfile to es5 or don't use imports

Some users have problems requiring Babel as external module. This slows down the build process. See discussion at https://markgoodyear.com/2015/06/using-es6-with-gulp/

Docs: Update pattern lab package

Documentation here appears to be outdated now that we don't need to run the PHP server in parallel anymore.
http://factorial-io.github.io/factorial-frontend-stack/packages/pattern-lab.html#features

cc @krisimmig

run lint task while running watch tasks

It makes for a better developer experience …

Chore: Upgrade eslint config airbnb base

Breaks when upgrading from 13.1.0. to 14.0.0.

Feat: @factorial/frontend-stack-vue

This new middleware should do the following:

• Convert .vue files (SFCs) to regular JS & CSS
• Let the normal core middleware take care of converting JS and CSS

Result:
We can add .vue files into our patternlab workflow and use vue by just adding a new middleware to the neutrino stack if necessary.

Use babel preset env

https://github.com/babel/babel-preset-env

dev mode should provide lint warnings, production mode should produce errors.

I am not sure how the linting rules are implemented here, there is no .eslint file that tells the IDE how to lint the JS files.

Linting on save is working strangely as well I think. When I start with yarn start and have linting errors, it stops the task completely until I fix all errors. Than, with no errors I can start the task again and it keeps running. But when I than reintroduce the same errors, there is no linting error and the build completes successfully.

So at the moment the only way I can see if I have linting errors or warnings is by restarting the build process with yarn start.

Maybe I have something configured wrong?

Change version to 0.1.0

New package: @factorial/frontend-stack-jest

SHOULD:

• Auto-detect *.test.js and *.spec.js.
• Test files should be located next to our patterns, e.g.
• The path/glob pattern for location should be configurable

• button.css
• button.js
• button.test.js
• button.twig

SEE:
https://neutrinojs.org/packages/jest/

Errors when generating patternlab

There are still errors when generating patternlab witht he new filewathcer plugin and php core/console --generate in the frontend-stack-pattern-lab package.

To reproduce:

• Start the watch process with yarn run neutrino start
• Change a file that is compiled by babel (JS or CSS)
• Change a file that is compiled by patternlab (YAML or TWIG)

Result:
The patternlab generate commands runs twice and errors the second time because of unremovable/unlinkable files.

Should be:
php core/console --generate only runs once on file change.

Revise automatic code style fixes

• Move to prettier

Fix: Avoid build changes when no files actually changed

Whenever a build is triggered (changing a branch, saving a file), the js files in the build are changed, even though there might be no changes in the source files.

Feat: Build external source maps when production

IS
Currently only inline source maps are build in dev mode.

SHOULD
External source maps should be build when running in production mode.

New package: @factorial/frontend-stack-pattern-lab

SHOULD:

• Support webpack-dev-server
• (Support hot module replacement)
• Serve patternlab

SEE:

• https://neutrinojs.org/packages/dev-server/
• https://patternlab.io/
• (https://github.com/phase2/particle)

Chore: Fix peer dependency warnings

Write migration guide from gulp to neutrino

UC:
We have an existing project based on our gulp based frontend stack and want to migrate it to the new neutrino version.

Feat: Build CSS sourcemaps in production

style minification through @neutrinojs/style-minify and external source maps appear to be conflicting

Add hint for expected node version

use the engine dependency in package.json.

Update migration guide with patternlab watch adjustments

• with patternlab watch adjustments (Watch build files to rebuild patternlab ...).
• with caveats towards multiple stylelint-disable comments. stylelint/stylelint#874
• with how relative paths might need to be adjusted towards JS entry point.

Fix stylelint config errors

Default eslint env should be `browser`

IS:
Currently no default env is set. This leads to lint errors (window, document) when migrating existing projects.

SHOULD:
The default evironment should be browser.