demo-folder-component-archetype.md

Update Component Archetype

In order to make archetype component work with electrode explorer, we decided to add demo folder back and keep everything inside the same with original. Instead of getting component from src, we use demo.jsx from demo in demo-app directly.

Changes

Step 1 Adding demo folder under packages/[component]

--- demo
  --- examples
    --- [component].example
  --- demo.css
  --- demo.jsx

Step 2 Update demo-app/src/components/home.jsx to get component from demo.jsx

import OssComponentDemo from "../../../../packages/oss-component/demo/demo";

Changes Required

Issue 1: only one instance of babel-polyfill is allowed

Two places

Issue 2: addComponentAsRefTo

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
    at invariant (main.bundle.dev.js:226)
    at Object.addComponentAsRefTo (main.bundle.dev.js:122260)
    at attachRef (main.bundle.dev.js:122526)
    at Object.ReactRef.attachRefs (main.bundle.dev.js:122545)
    at ReactDOMComponent.attachRefs (main.bundle.dev.js:8310)
    at CallbackQueue.notifyAll (main.bundle.dev.js:33772)
    at ReactReconcileTransaction.close (main.bundle.dev.js:122400)
    at ReactReconcileTransaction.closeAll (main.bundle.dev.js:13509)
    at ReactReconcileTransaction.perform (main.bundle.dev.js:13456)
    at batchedMountComponentIntoNode (main.bundle.dev.js:34677)

The above issue is caused by Invalid Refs or Multiple copies of React. Since we do not have any Refs, the problem should be having multiple copies of React, see the structure below:

npm ls react
[email protected] /Users/s0d00px/test-test/demo-app
└─┬ [email protected]
  └── [email protected]
[email protected] /Users/s0d00px/test-test/packages/oss-component
└─┬ [email protected]
  └── [email protected]

Since we are adding pacakge/[component] as an webpack resolve alias in demo-app, when we are trying to run the app, it somehomw have two copies of react by this structure. The solution proposed here is to move react and react-dom one level up at lerna structure packge.json. And remove the two react dependencies from demo-app and packages/[component] node_modules.

Another potential solution is to set react as external in webpack and import react form scripts. (Not sure it is a good solution, needs discussions).

After re-run the app, you shall see the component code & its preview.

Latest Component Archetype Structure

--- demo-app
  --- archetype
  --- config
  --- src
    --- client
      --- actions
      --- components
      --- reducers
      --- styles
    --- server
  --- test

--- packages/[component]
  --- demo
    --- examples
      --- [component].example
    --- demo.css
    --- demo.jsx
  --- src
    --- components
    --- lang
    --- styles
    --- index.js
  --- test