didi0613

Electrode Archetype React Component

Demo-server Issues

basics

Component is in '/src' and demo files are in '/demo'. Run gulp demo for development build and demo tasks.

gulp demo flow

didi0613

Update App to React 15.5

Pre Upgrade Steps

1. Run a gulp build and take note of the bundle sizes.
2. Make sure your dependencies/components are using component-archetype version13 and above.

React Code Changes

1. Replace the following in your application/components:

didi0613

Intructions for publishing gitbook

install the plugins and build the static site

gitbook install && gitbook build

checkout to the gh-pages branch

git checkout gh-pages

pull the latest updates

git pull origin gh-pages --rebase

didi0613

Update your component to react 15.5

Here is the instructions how you can update your componnet to react 15.5.

Update your dependencies

Go into your package.json and upate the followng dependencies:

"@walmart/electrode-archetype-react-component": "^13.5.3",
"@walmart/electrode-archetype-react-component-dev": "^13.5.3”,

didi0613

Upgrade to Archetype React App 3.0+ Instructions

1. Update your package.json:

   • Upgrade your archetype app to 3.0.0+
   
   

   "electrode-archetype-react-app": "3.0.3",
   

"electrode-archetype-react-app-dev": "3.0.3"

didi0613

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

didi0613

File a JIRA ticket for Electrode Core Team

To better support Walmart Teams building on the Electrode platform, we created a JIRA board for filing bugs and requests. We will try our best to respond to these requests.

• Please go to our Service Desk

• Select the relevant Issue Type on the Create Issue dialog box.

• Type a description for the issue. Please use these 5 Questions as a baseline.

• Please provide us your app name, repo URL and branch name.

didi0613

What's the Issue?

For IE9, we are splitting the CSS into two files and serving them up, whereas for other browsers we serve a single file.

The problem is that the build script is optimizing the CSS after splitting it into two parts instead of before. A step of this optimization is doing a z-index reduction, where all z-indices are reduced to their lowest possible value.

For example, if one rule has "z-index: 100" and another has "z-index: 150", it will be reduced to 1 and 2.

However, the parts are optimized individually, some information about other z-index values gets lost.

What's the possible solution?

didi0613

Re-structure archetype app styles

Issues & Features Requested

• When users trying to load css styles from dependencies, css always got encapsulated because we preset css modules + css next as default
• sass/scss support

Current Rules for CSS Styles

• [cssModuleSupport By default, this archetype assumes you are using CSS-Modules + CSS-Next]
• Stylus is also supported for which the following cases can occur.

didi0613

Upgrade wml internal App to React 16 instruction

Why React 16

React 16 roughly three times faster than React 15, it includes few long-standing requested features:

• fragments: return an array of elements from a component’s render method.
• error boundaries: better error handling.
• portals: a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component
• support for custom DOM attributes: instead of ignoring unrecognized HTML and SVG attributes, React will now pass them through to the DOM.
• improved server-side rendering: supports streaming, so you can start sending bytes to the client faster; a new packaging strategy that compiles away process.env checks.