component-template icon indicating copy to clipboard operation
component-template copied to clipboard

Published 20 hours ago • verified publisher icon reactstrap

Initial Setup

Open eddywashere opened this issue 7 years ago • 2 comments

  • [x] Enable Travis CI
  • [x] Create Hello World Component
  • [x] Verify Docs Publishing
  • [x] Verify NPM Publishing
  • [ ] Fork this project, and verify the steps required to publish a component

eddywashere avatar Sep 24 '16 22:09 eddywashere

I'm kind of taking a chance on facebookincubator/create-react-app with the hopes of simplifying what it takes to build and publish a react component to npm. I think a solid checklist includes the following:

  • docs/gh-pages (browser routing instead of the complicated static site setup that reactstrap has)
  • script to publish docs to gh-pages
  • script for creating release branches with Changelog
  • script for publishing to npm
  • testing baked in
  • CI integration for scripts

I've worked around some create-react-app defaults. I don't think supporting eject is important right now. I think what is important is testing components and publishing them, something it does pretty well out of the box but might need some notes when testing a fork of this.

Notes:

  • npm run build builds docs, npm run pre-build only creates the transpiled component in lib (used for publishing to npm)
  • publishing is using babel and requirs a .babelrc file (might be an issue once ejected)
  • scripts dir is also a directory used by eject

eddywashere avatar Sep 24 '16 22:09 eddywashere

Have you considered using cookiecutter?

It's like yeoman only every part of the template can be replaced.

You can do like this:

Source code:

<html>
<head>
  <script "{{cookiecutter.repo_name}}"></script>
  <title>{{cookiecutter.repo_name}} by {{cookiecutter.author_name}}</title>

and so on...

Directory names and filenames can also be templated. For example:

/
 /src/components/{{cookiecutter.repo_name}}.jsx

Demo files can automatically use the real names of things without having to be edited after generation and so forth.

So, instead of having to search & replace everywhere, the generation of the skeleton automatically uses the correct fields from the configuration (a simple JSON file with key/value storage of creation parameters like repo_name, license, version and so forth).

I know...another tool...but I've found cookiecutter very helpful for things just like this where you need to make a bunch of them and search & replace gets very, very, very old very fast.

Let me know what you think!

ssteinerx avatar Nov 25 '16 22:11 ssteinerx