formidablelabs / builder-react-component Goto Github PK

As @boygirl found in FormidableLabs/victory-component-boilerplate#11, using the @Radium syntax in the new Builder-based victory-component-boilerplate doesn't work, because Babel isn't always getting its config from our .babelrc and thus uses the default settings.

With decorator syntax, this uses the correct .babelrc and works: builder run build-lib

These do NOT work: builder run build-dist and builder run test-frontend

Addng .babelrc to ROOT makes it work, but we don't want to have to do that.

We need a way to pass along our .babelrc path to Webpack (for building dist and testing) and isparta (for coverage) – the latter probably being the most difficult as I don't think an option is exposed.

/cc @ryan-roemer @boygirl

Have archetype be the source of truth.

This is required to get exit 0 status to support FormidableLabs/victory#98

Task:

• Remove dist/ and lib/ from source
• Build dist/ and lib/ if installed off git with some sensible approach
• Ideally keep "building" deps out of dependencies
• And accept losing bower installs (which can't build)
• Update docs on "usage" scenarios: CJS, webpack, AMD, lib, vanillajs, npmcdn, etc.

Research:

• Radium did this in FormidableLabs/radium@90f353b but hit bug FormidableLabs/radium#548 We'll watch this for more.

Ignored by .gitignore, included with .npmignore

From @chaseadamsio

If you decide to go either route, it might make sense to abstract util/dev.js into its own package so that anyone who wanted to create builder archetypes could just use it without having to know how to use the script or update it whenever you decide to update it...it might even make sense to make it a part of builder as a task, something like: builder publish archetype inside of a repository that would publish your archetype and the -dev version for you.

I was working on a builder archetype from scratch this morning just for kicks and giggles and my init.js is going to look exactly like the following lines in the prompts:

https://github.com/FormidableLabs/builder-react-component/blob/master/init.js#L30-L60

This is probably getting super meta, but @ryan-roemer what do you think about having builder-support allow you to init and init.js with specific values?

Not sure whether this is an issue with the archetype or builder itself...

on repos that are using builder,npm install will fail if they include another package that uses builder.

failing CI on this repo is an example
FormidableLabs/victory-axis#40

For C:\Documents[SPACE] in expanded archetype.

And possible bug with the space too...

Just like npm does it: https://docs.npmjs.com/cli/run-script

$ npm run-script <command> [-- <args>...]

As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:

$ npm run test -- --grep="pattern"

• builder init a fully new package into TEMP/ and run builder run check-ci
• Make a TEMP2 and npm install ../TEMP to flush out npm install bugs like FormidableLabs/builder#25

• First, see if we don't need to implement this ticket but can instead document how to do easy watching using the new builder <action> <task(s)> -- ARBITRARY COMMAND LINE FLAGS functionality to just pass -- --watch or something meaningful to karma on the command line. Might still need at least a separate task to watch known directories, etc. (Talk to Ryan if this doesn't make sense).
• If so, just document how to watch in DEVELOPMENT.md
• If not, implement new tasks as follows:

Need a karma config something like:

module.exports = function (config) {
  config.set({
    frameworks: ["mocha", "phantomjs-shim"],
    reporters: ["spec"],
    browsers: ["PhantomJS"],
    basePath: process.cwd(), // repository root.
    files: [
      // Test bundle (must be created via `npm run dev|hot|server-test`)
      "http://127.0.0.1:3001/assets/bundle.js",

      // Watch files for re-running tests.
    ].concat([
      "demo/**",
      "src/**",
      "test/**"
    ].map(function (pattern) {
      return { pattern: pattern, included: false, served: false, watched: true };
    })),
    port: 9999,
    singleRun: true,
    client: {
      mocha: {
        ui: "bdd"
      }
    }
  });
};

and archetype task of:

"test-frontend-dev-watch": "karma start node_modules/@walmart/electrode-archetype-react-component/config/karma/karma.conf.dev.js --colors --browsers Chrome --no-single-run --auto-watch",

• Hook up greenkeeper
• Relies on builder-init being part of CI to test / verify.
• Hook to / harmonize with semantic versioned releases.

Sinon currently does not play well with Webpack due to non-standard UMD configuration. We currently globally include it.

TASK:

• Update webpack.config.*.js to use:

  // Add sinon hacks to work with webpack.
  // https://github.com/webpack/webpack/issues/304
  module: {
      noParse: [
          /node_modules\/sinon\//,
      ]
  },
  resolve: {
      alias: {
          sinon: require.resolve("sinon/pkg/sinon")
      }
  }

• Remove window.sinon, global.sinon references.

• Retrofit all test code to require("sinon") or import sinon from "sinon";

• Remove eslint exceptions for sinon global.

• Remove global sinon from Karma configs

  • builder-react-component/config/karma/karma.conf.dev.js

    Lines 17 to 19 in 8629358

    	// Sinon has issues with webpack. Do global include.
    	require.resolve("sinon/pkg/sinon"),

  • builder-react-component/config/karma/karma.conf.js

    Lines 27 to 28 in 8629358

    	// Sinon has issues with webpack. Do global include.
    	require.resolve("sinon/pkg/sinon"),

• Retrofit generator code:

  • https://github.com/FormidableLabs/formidable-react-component-boilerplate/blob/bd0e061ec3e27282d165def790437b326a6d543a/test/client/test.html#L13

References:

• webpack/webpack#304
• sinonjs/sinon#600 (comment)

Replace with builder built in.

I have issues when trying to run the build scripts of the package.json.
When running builder run build (for example), it complains

undefined:1
'{BABEL_ENV:commonjs}'
^

SyntaxError: Unexpected token ' in JSON at position 0
    at JSON.parse (<anonymous>)
    at parse (C:\somepath\node_modules\builder\lib\utils\json.js:36:19)
    at module.exports.Environment.updateEnvFlag (C:\somepath\node_modules\builder\lib\environment.js:153:17)
    at new module.exports (C:\somepath\node_modules\builder\lib\environment.js:64:8)
    at module.exports (C:\somepath\node_modules\builder\bin\builder-core.js:32:13)
    at Object.<anonymous> (C:\somepath\node_modules\builder\bin\builder.js:43:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)

It's most certainly a problem with my windows dev box... In fact, it complains because the string given as argument through --env is not escaped properly.

I've manage to fix it by changing these lines:

"build-es": "builder run --env '{\"BABEL_ENV\":\"es\"}' build-babel -- -d es"
"build-lib": "builder run --env '{\"BABEL_ENV\":\"commonjs\"}' build-babel -- -d lib",

into:

"build-es": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"es\\\"}\" build-babel -- -d es"
"build-lib": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"commonjs\\\"}\" build-babel -- -d lib",

What is wrong ? is it my setup ? my node ?

How can I run webpack-dev-server bind in host 0.0.0.0, I need to develop on the remote machine.

builder run server-dev --host 0.0.0.0

It's not work.

In https://github.com/FormidableLabs/builder-react-component/blob/master/config/webpack/demo/webpack.config.hot.js#L9 we need something like:

// Update loaders array.
mod.loaders[0].loaders = [require.resolve("react-hot-loader")]
  .concat(mod.loaders[0].loader ? [mod.loaders[0].loader] : [])
  .concat(mod.loaders[0].loaders || []);

// Remove single loader if any.
mod.loaders[0].loader = null;

/cc @coopy @boygirl

Leave "npm special" script names (test, start) for project to implement.