plotly / dash-components-archetype Goto Github PK

Deprecated. A Builder archetype for Dash component suites. See the new version here: https://github.com/plotly/dash-component-boilerplate

License: MIT License

JavaScript 88.96% Python 9.08% HTML 1.97%

dash-components-archetype's Introduction

Dash Components Archetype (Deprecated)

Note: This repo, and this way of creating Dash Components, has been deprecated. Please use the new Dash Component Boilerplate: https://github.com/plotly/dash-component-boilerplate/

Overview

This is a Builder archetype for Dash component suites. It defines build- and test configuration, as well as development scripts and a convenient way to generate a new component suite project with all the necessary boilerplate.

📣 Component authors: Subscribe to #40 to be notified of breaking changes 📣

Generating a component suite project

$ npm install -g builder-init
$ builder-init dash-components-archetype

Answer the prompts, then:

$ cd [YOUR-COMPONENT-SUITE-NAME]
$ npm install

Development

Demo Server

If your component suite project has a demo/ directory following the same structure as the init/demo directory in this archetype, you can start up a demo development server:

$ npm run demo
$ open http://localhost:9000

This lets you see a demo of the rendered components. You have to maintain the list of components in demo/Demo.react.js.

Code quality

To run lint:

$ npm test

TODO: ESLint is not reporting problems #15

Testing your components in Dash

The best way to test your components in the real Dash context is by linking into dash2 and testing them from there.

Prepare your component suite module by linking and watching for changes

 # Symlink module
 $ npm link

 # Transpile components to `lib/` and watch for changes
 $ npm start

Link module into dash2 project

 # In the `dash2/renderer` project directory:
 $ npm link [YOUR-COMPONENT-SUITE-NAME]

Now you should be able to restart the webpack process (in dash2/renderer: ctrl-c, npm start), after which webpack will automatically pick up new changes to the component suite.

Customizing your project

You can override any npm script in the archetype with your own implementation. To see the list of supported scripts, run ./node_modules/bin/builder run. For more details, see Builder Archetypes.

Release

To tag and release a new version of the archetype, follow these instructions. You might be tempted to add some of these steps to NPM's *version lifecycle methods, but that would interfere with versioning and publishing of the actual project depending on the archetype, since Builder merges the project package.json scripts with the archetype's package.json scripts.

# 1. Bump package.json `version` according to [semver][]
vi package.json

# 2. Generate `dev/*` package files
node_modules/.bin/builder-support gen-dev

# 3. Run tests
npm run builder:check

# 4. Commit and tag
git add package.json dev
git commit -m "vx.x.x"
git tag -a "vx.x.x" -m "vx.x.x"
git push --follow-tags

5. Publish main and dev package
npm publish && cd dev && npm publish && cd -

Contributing

You can test component generation with this library with npm link and with the absolute file path option of builder-init.

npm install -g builder-init
git clone https://github.com/plotly/dash-components-archetype.git
cd dash-components-archetype
npm link
cd dev
npm link
cd ../..
builder-init /ABSOLUTE/PATH/TO/dash-components-archetype/
# answer prompts to create new file

# Enter new package folder
cd new-package # replace with the name of your package from the prompt
npm link dash-components-archetype
npm link dash-components-archetype-dev
npm i

dash-components-archetype's People

Contributors

Stargazers

Watchers

Forkers

radovankavicky gapdata chaliy dkozatc yunake lewisdaleuk robbason ned2 itamayo akronix rmarren1 ninazhuang fazeh mrbez baiyuanxiang jessie-png christian-ngnie adesuyitolulope plantly

dash-components-archetype's Issues

Use top-level Webpack config files / Add webpack as a dependency of generated project

Reference #23 , can you move the webpack.config.js files to the top-level of the project so that users are empowered to choose their own loaders, etc?

It'd be even better if you could use webpack from a dependency in the generated project along with being able to modify/bring your own webpack config

I'd be willing to work on this if the team supports it.

npm install fails with 'Can not load "webpack"!' error

Hi,

I am trying to get the development setup ready and faced error with following command on my system.

npm test && builder run build-dist && npm run copy-lib

Following are logs that I receive when I run npm install

(dashly) ➜  dash-component-dev npm install

> [email protected] prepublish /Users/priyanktrivedi/development/dashly/dash-component-dev
> npm test && builder run build-dist && npm run copy-lib


> [email protected] test /Users/priyanktrivedi/development/dashly/dash-component-dev
> builder run check

[builder:config:environment] {"cwd":"/Users/priyanktrivedi/development/dashly/dash-component-dev","dir":"/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/builder/lib"}
[builder:builder-core:start:79302] Started: run check
[builder:run] check - builder run lint && builder run test-frontend-cov
[builder:proc:start] Command: builder run lint && builder run test-frontend-cov
[builder:config:environment] {"cwd":"/Users/priyanktrivedi/development/dashly/dash-component-dev","dir":"/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/builder/lib"}
[builder:builder-core:start:79304] Started: run lint
[builder:run] lint - eslint --fix --ignore-path .gitignore .
[builder:proc:start] Command: eslint --fix --ignore-path .gitignore .
[builder:proc:end:0] Command: eslint --fix --ignore-path .gitignore .
[builder:builder-core:end:79304] Task: run lint ended normally
[builder:config:environment] {"cwd":"/Users/priyanktrivedi/development/dashly/dash-component-dev","dir":"/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/builder/lib"}
[builder:builder-core:start:79307] Started: run test-frontend-cov
[builder:run] test-frontend-cov - NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js
[builder:proc:start] Command: NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js
16 07 2017 17:24:50.868:ERROR [preprocess]: Can not load "webpack"!
  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'preLoaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
 - configuration.resolve.extensions[0] should not be empty.
 - configuration.resolveLoader has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
    at webpack (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma-webpack/node_modules/webpack/lib/webpack.js:19:9)
    at new Plugin (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma-webpack/lib/karma-webpack.js:63:18)
    at invoke (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:59:20)
    at get (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:48:43)
    at /Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
    at Array.invoke (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:70:31)
    at get (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/lib/preprocessor.js:55:20)
    at Array.forEach (native)
    at createPreprocessor (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/lib/preprocessor.js:74:20)
    at Array.invoke (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:75:15)
    at get (/Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:48:43)
    at /Users/priyanktrivedi/development/dashly/dash-component-dev/node_modules/dash-components-archetype-dev/node_modules/karma/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
16 07 2017 17:24:50.946:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9999/
16 07 2017 17:24:50.947:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
16 07 2017 17:24:50.948:ERROR [karma]: Found 1 load error
[builder:proc:end:1] Command: NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js
[builder:builder-core:end:79307] Task: run test-frontend-cov, Error: Command failed: sh -c NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js

[builder:proc:end:1] Command: builder run lint && builder run test-frontend-cov
[builder:builder-core:end:79302] Task: run check, Error: Command failed: sh -c builder run lint && builder run test-frontend-cov

npm ERR! Test failed.  See above for more details.

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prepublish: `npm test && builder run build-dist && npm run copy-lib`
npm ERR! Exit status 1

I am new to npm, so please help me there is something wrong with the npm configuration or node itself.

Thanks,
Priyank

Roll up pip publishing steps in archetype script

npm version should also bump the version number in setup.py. This can be done with a script that's triggered in the project init/package.json's scripts.version field.
The python setup.py sdist upload incantation should be run as part of the publish flow. This can be done by adding it to the project init/package.json's scripts.publish field.

If the above works, the instructions in the init/README.md for publishing don't need to change other than adding instructions for the necessary user account setup for publishing to the python package management ecosystem.

add css & less loader for styles & update webpack

I'm trying to build my own component upon one react lib, but find the css can not be loaded.
just check the webpack config and find the problem.

I need the css and less loader
in the file dash-components-archetype/config/webpack/partials/babel.js,
add follow lines to the loader

                { test: /\.css$/, loader: "style-loader!css-loader" },
                { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },

still, less,less-loader,css-loader are required to install as the dev dependencies
2. can you guys update the webpack to the v2 version?

build-dist clean props when propTypes is {}

I want to have a component with no props.

If I've set up Component.propTypes = {}. React has no problems with this, but when I run builder run build-dist the corresponding component in metadata.json has no attribute "props", hence it doesn't work in Dash.
However, If I manually set "props": {} in the metadata.json file, it does work.

Hot reloading for `npm run demo` doesn't work

Solution for: PhantomJS have not captured in 60000 ms, killing

I'm running on mac OS High Sierra 10.13.5 and I was having the error mentioned on the title when running npm install.
What I did to fix it is:

Add: 0.0.0.0 127.0.0.1 to /etc/hosts (This step was probably not required)
Run: export IP=127.0.0.1 before running npm install

I got the idea from:
karma-runner/karma-phantomjs-launcher#84 (comment)

I'm opening this for future reference. And maybe the source code can be adjusted to avoid this in the future.

Error when running `npm run publish-all`

When I try to publish my components using npm run publish-all, it throws an error with the following message:

Submitting dist/grasia_dash_components-0.0.1.tar.gz to https://pypi.python.org/pypi
Upload failed (410): Gone (This API has been deprecated and removed from legacy PyPI in favor of using the APIs available in the new PyPI.org implementation of PyPI (located at https://pypi.org/). For more information about migrating your use of this API to PyPI.org, please see https://packaging.python.org/guides/migrating-to-pypi-org/#uploading. For more information about the sunsetting of this API, please see https://mail.python.org/pipermail/distutils-sig/2017-June/030766.html)
error: Upload failed (410): Gone (This API has been deprecated and removed from legacy PyPI in favor of using the APIs available in the new PyPI.org implementation of PyPI (located at https://pypi.org/). For more information about migrating your use of this API to PyPI.org, please see https://packaging.python.org/guides/migrating-to-pypi-org/#uploading. For more information about the sunsetting of this API, please see https://mail.python.org/pipermail/distutils-sig/2017-June/030766.html)

Ensure `lib/metadata.json` exists before publishing python package

#1 (comment)

Better Dev UX

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Refactor webpack test configuration

The test build configuration files

webpack.config.test.js
webpack.config.coverage.js

...are brought in from the builder-react-component archetype, and use lodash to extend. Let's refactor to take advantage of the composable partials, and remove lodash as a dev/ dependency.

npm ERR! 404 Not Found: dash-component-archetype@latest

I was following the tutorial for creating a new Dash component from a React component. I installed builder, but when I run builder-init dash-component-archetype I got this error.

Error: 'npm pack dash-component-archetype' exited with error code: 1
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/builder-init/node_modules/denim/lib/task.js:188:32)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:897:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)

Here are the NPM logs.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'pack',
1 verbose cli   'dash-component-archetype' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 199f16ead5f70a4c
5 http fetch GET 404 https://registry.npmjs.org/dash-component-archetype 1641ms
6 silly fetchPackageMetaData error for dash-component-archetype 404 Not Found: dash-component-archetype@latest
7 verbose stack Error: 404 Not Found: dash-component-archetype@latest
7 verbose stack     at fetch.then.res (/usr/local/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/fetch.js:42:19)
7 verbose stack     at tryCatcher (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
7 verbose stack     at Promise._settlePromiseFromHandler (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
7 verbose stack     at Promise._settlePromise (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
7 verbose stack     at Promise._settlePromise0 (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
7 verbose stack     at Promise._settlePromises (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
7 verbose stack     at Async._drainQueue (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
7 verbose stack     at Async._drainQueues (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
7 verbose stack     at Immediate.Async.drainQueues (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
7 verbose stack     at runCallback (timers.js:800:20)
7 verbose stack     at tryOnImmediate (timers.js:762:5)
7 verbose stack     at processImmediate [as _immediateCallback] (timers.js:733:5)
8 verbose cwd /tmp/builder-init118420-9489-1dn34pg.0qhm
9 verbose Linux 4.4.0-124-generic
10 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "pack" "dash-component-archetype"
11 verbose node v8.1.4
12 verbose npm  v6.0.1
13 error code E404
14 error 404 Not Found: dash-component-archetype@latest
15 verbose exit [ 1, true ]

A GET request on https://registry.npmjs.org/dash-component-archetype returns {}.

Support React 16 as a dependency

Issue

When using dash-components-archetype to build a custom Dash component, writing React 16 code occasionally causes weird behavior with components (note that this also includes a custom webpack config and a different .babelrc file for Flow type hinting, although the issue is definitely in the React versioning).

Example

Using the DropdownMenu and MenuItem components from material-ui as

<DropDownMenu value={this.state.dropdownValue} onChange={this.handleChange}>
  <MenuItem value={1} primaryText="Never" />
  <MenuItem value={2} primaryText="Every Night" />
  <MenuItem value={3} primaryText="Weeknights" />
  <MenuItem value={4} primaryText="Weekends" />
  <MenuItem value={5} primaryText="Weekly" />
</DropDownMenu>

throws Error: parentComponent must be a valid React Component when clicking on the dropdown. Everything works as intended when the custom Dash component uses the same version of React as dash-components-archetype.

A similar error is thrown when using a Dialog component.

Proposed solution

Change "react": "^15.5.4" in package.json to something like "react": "^15.5.0 || ^16.1.0" (or whatever versions are desired). React 16 is now the preferred major version.

Temporary fix

Make it more obvious that a developer must have React 15.5.4 to ensure everything works.

Register component suite JavaScript dynamically

See discussion here: https://github.com/plotly/dash2/pull/20/files#r67213120

Demo page does not work at all

when you run npm run demo you get empty page with errors. There are two issues with demo/index.html:

It references /build/bundle.js, however webpack is configured to /lib/ even for dev outputs
It does not reference react and react-dom, which is configured as externals in webpack.

If you do not mind, I will add pull request to fix this issues.

Make `python setup.py develop` linking work with `package_data` resources

There is a workflow that links your module into site-packages which would
make it unnecessary to re-run python setup.py install on every change: python setup.py develop.

Unfortunately, the link doesn't seem to work with resources defined in package_data.

See http://www.siafoo.net/article/77#id10

Fix eslint

The current builder:check script is supposed to lint the archetype JavaScript, but it never throws any errors. Fix it:
eslint --fix --ignore-path .gitignore --ext *.js config init

Don't include `./node_modules/` in eslintrc `extends` path

@ryan-roemer suggests:

https://github.com/plotly/dash-components-archetype/blob/master/init/%7B%7Beslintrc%7D%7D try to do extends: dash-components-archetype/config/eslint/eslintrc-react.json

Fix code coverage reporting to be accurate

Today, the code coverage only includes sources for which tests exist.

Requiring all sources to get accurate code coverage should work, but doesn't. See dash-core-components/test/main.js:

// Use webpack to include all app code _except_ the entry point so we can get
// code coverage in the bundle, whether tested or not.
// TODO: This doesn't seem to work.
var srcReq = require.context('../src', true, /\.js$/);
srcReq.keys().map(srcReq);

Enable `grep` for tests

There is a way to run karma start & karma run -- --grep=MyTestPattern, but it's not trivial to set up: karma-runner/karma-mocha@2787886

Today, we have to rely on Mocha .only statements.

Archetype uses scripts that does not work on Windows

Dash itself runs perfectly on Windows. I think it will be benedictional if dash-components-archetype will also support Windows. Right now almost any script will results to errors something like this:

[builder:proc:end:1] Command: NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js
[builder:builder-core:end:8240] Task: run test-frontend-cov, Error: Command failed: cmd /d /s /c NODE_ENV=test karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js

[builder:proc:end:1] Command: builder run lint && builder run test-frontend-cov
[builder:builder-core:end:8840] Task: run check, Error: Command failed: cmd /d /s /c builder run lint && builder run test-frontend-cov

There are some problems I identified:

Environment variables. This could be fixed with cross-env
Unix tools, this could be fixed by cross platform equvalents
react-docgen generates non cross platform metadata - reactjs/react-docgen#199 , react-docgen could fix this, or dash/development could fix this, or dirty hack to fix in script.

If you do not mind I would create pull request.

Don't use `./` prefixes in package.json

@ryan-roemer sez:

In https://github.com/plotly/dash-components-archetype/blob/master/package.json remove ./ prefixes. You very likely don't need them and they break windows.

Create a CLI that handles building a Dash component from a React component

I've been experimenting a bit with building a CLI that handles the build process of building Dash components from React components. https://github.com/valentijnnieman/create-dash-component
I think this would be a nice solution to have, especially for those following React tutorials (like our own "React for Python developers") that use create-react-app. In those cases, one would only have to run create-dash-component in the terminal, and instantly start using their newly built component in Dash! I'm not sure if it would replace a proper build-tool (like the archetype), but I think there's some value in it, so would like to discuss.

If we were to support a CLI like this instead of an archetype, it would mean that:

We no longer have to worry about keeping an archetype up to date; create-react-app or whatever we will suggest users to use will take care of that
It could potentially allow users to more easily convert already existing React components, without
having to take out the source code of an existing component and copy-pasting it into the archetype
We won't force users to use a certain style - it can be any configuration of React, as long as you did the requirements for Dash (comments, propTypes) right

A downside would be that users have to set up comments and propTypes around their components themselves (perhaps there's a way of solving this as well though!)

Here's a cool gif:

@plotly/dash I would love to get some feedback on this, as I think it's a good solution and would like to continue to build this out, so that we can use it in our documentation.

Component Authors: Subscribe to be notified of Breaking Changes

This is a locked thread that will be updated with new comments when we need to make a Breaking Change to Dash's component API.

If you are an author of a component library, subscribe to this thread to be notified when you need to upgrade your library.

We will allow a few weeks to pass between announcing a breaking change and issuing the upgraded libraries.

Breaking changes refer to changes in Dash's front-end (dash-renderer) that would be incompatible with you custom component library. These will be accompanied with a major version upgrade in dash-renderer.

We will lock this issue to minimize the noise. If you have comments about this issue, please open up a new issue.