Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Components: Ensure forward-compatible with React wrappers in Node 14 #4251

Closed
asudoh opened this issue Oct 19, 2020 · 0 comments
Closed

Components: Ensure forward-compatible with React wrappers in Node 14 #4251

asudoh opened this issue Oct 19, 2020 · 0 comments
Assignees
@asudoh
Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Milestone
Sprint 20-25

Comments

@asudoh
Copy link
Contributor

asudoh commented Oct 19, 2020

The problem

#3475 tried to introduce automatic React wrapper, but abandoned because SSR with it doesn't work in Node 12 environment.

The solution

Test it again with Node 14 and ensure our component code is forward-compatible for such React wrapper.
@asudoh asudoh added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Oct 19, 2020
@asudoh asudoh mentioned this issue Oct 19, 2020
Closed
29 tasks
@RobertaJHahn RobertaJHahn added this to the Sprint 21-01 milestone Oct 28, 2020
@jeffchew jeffchew modified the milestones: Sprint 21-01, Sprint 20-24 Dec 1, 2020
asudoh added a commit to asudoh/carbon-custom-elements that referenced this issue Dec 2, 2020
@asudoh
chore(components): put enums in separate file
692a2b8 
Introduces a CommonJS version of React wrappers, that has the following
characteristics:

1. Leverages "conditional exports" node.js (`package.json`) feature so
   `import 'carbon-web-components/es/components-react/tag/tag.js'`
   loads the corresponding CommonJS version in node.js environment
   (`/lib/components-react-node/tag/tag.js`).
   Ref: https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping
2. Does not load custom elements implemetation because custom elements
   implementation cannot be run in node.js environment.
3. Does not load `lit-html` or `lit-element` because they only ship
   with ECMAScript modules format.

As part of the effort, moves enums, etc. code to a separate modules so
they can be built separately from React wrappers and we can make the
logic of auto-generating CommonJS version of React wrappers simpler.

Also adds CodeSandbox example and their corresponding build integration
tests for:

* Basic React SSR
* Next.js

Refs carbon-design-system/carbon-for-ibm-dotcom#4251.
@asudoh asudoh mentioned this issue Dec 2, 2020
Merged
asudoh added a commit to carbon-design-system/carbon-web-components that referenced this issue Dec 8, 2020
@asudoh
chore(components): introduce CommonJS version of React wrappers (#550)
6b2d7ac 
Introduces a CommonJS version of React wrappers, that has the following
characteristics:

1. Leverages "conditional exports" node.js (`package.json`) feature so
   `import 'carbon-web-components/es/components-react/tag/tag.js'`
   loads the corresponding CommonJS version in node.js environment
   (`/lib/components-react-node/tag/tag.js`).
   Ref: https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping
2. Does not load custom elements implemetation because custom elements
   implementation cannot be run in node.js environment.
3. Does not load `lit-html` or `lit-element` because they only ship
   with ECMAScript modules format.

As part of the effort, moves enums, etc. code to a separate modules so
they can be built separately from React wrappers and we can make the
logic of auto-generating CommonJS version of React wrappers simpler.

Also adds CodeSandbox example and their corresponding build integration
tests for:

* Basic React SSR
* Next.js

Refs carbon-design-system/carbon-for-ibm-dotcom#4251.
asudoh added a commit to asudoh/carbon-custom-elements that referenced this issue Dec 9, 2020
@asudoh
docs(examples): update React SSR
c865728 
Ensures React SSR and Next CodeSandbox examples run on Node 12.16.3+
given CodeSandbox runs on older Node version by default.

Refs carbon-design-system/carbon-for-ibm-dotcom#4251.
@asudoh asudoh mentioned this issue Dec 9, 2020
Merged
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Dec 9, 2020
@asudoh
feat(web-components): add React wrapper
974f2c6 
Adds React wrapper generator (`createReactCustomElementType`), based on
one in `carbon-web-components` to `@carbon/ibmdotcom-web-components`
codebase.

It helps our adoptors using React to use our components, with the
following support that React itself lacks for non-intrinsic elements:

* Element attributes mapping to non-string element property values
  (e.g. Boolean attributes)
* React props mapping to element properties instead of element
  attributes
* Event handlers

Also adds a Babel plugin that automatically creates React wrappers of
our components from our components' `@property()` annotations, as well
as the corresponding build process that generates the React wrappers to
`es/components-react` directory. So in the most typical scenario, our
users can use components in `es/components-react` directory in the same
manner as regular React components.

Also adds React stories so we can demonstrate the React integration.

Refs carbon-design-system#4251.
@asudoh asudoh mentioned this issue Dec 9, 2020
Merged
kodiakhq bot pushed a commit to carbon-design-system/carbon-web-components that referenced this issue Dec 10, 2020
@asudoh
docs(examples): update React SSR (#556)
3caacc2 
Ensures React SSR and Next CodeSandbox examples run on Node 12.16.3+
given CodeSandbox runs on older Node version by default.

Refs carbon-design-system/carbon-for-ibm-dotcom#4251.
@jeffchew jeffchew mentioned this issue Dec 15, 2020
Merged
asudoh added a commit that referenced this issue Dec 16, 2020
@asudoh
feat(web-components): add React wrapper (#4678)
2838e4c 
Adds React wrapper generator (`createReactCustomElementType`), based on
one in `carbon-web-components` to `@carbon/ibmdotcom-web-components`
codebase.

It helps our adoptors using React to use our components, with the
following support that React itself lacks for non-intrinsic elements:

* Element attributes mapping to non-string element property values
  (e.g. Boolean attributes)
* React props mapping to element properties instead of element
  attributes
* Event handlers

Also adds a Babel plugin that automatically creates React wrappers of
our components from our components' `@property()` annotations, as well
as the corresponding build process that generates the React wrappers to
`es/components-react` directory. So in the most typical scenario, our
users can use components in `es/components-react` directory in the same
manner as regular React components.

Also adds React stories so we can demonstrate the React integration.

Refs #4251.
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Mar 16, 2022
@asudoh
chore(components): introduce CommonJS version of React wrappers (carb…
d66b481 
…on-design-system#550)

Introduces a CommonJS version of React wrappers, that has the following
characteristics:

1. Leverages "conditional exports" node.js (`package.json`) feature so
   `import 'carbon-web-components/es/components-react/tag/tag.js'`
   loads the corresponding CommonJS version in node.js environment
   (`/lib/components-react-node/tag/tag.js`).
   Ref: https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping
2. Does not load custom elements implemetation because custom elements
   implementation cannot be run in node.js environment.
3. Does not load `lit-html` or `lit-element` because they only ship
   with ECMAScript modules format.

As part of the effort, moves enums, etc. code to a separate modules so
they can be built separately from React wrappers and we can make the
logic of auto-generating CommonJS version of React wrappers simpler.

Also adds CodeSandbox example and their corresponding build integration
tests for:

* Basic React SSR
* Next.js

Refs carbon-design-system#4251.
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Mar 16, 2022
@asudoh
docs(examples): update React SSR (carbon-design-system#556)
17b1e67 
Ensures React SSR and Next CodeSandbox examples run on Node 12.16.3+
given CodeSandbox runs on older Node version by default.

Refs carbon-design-system#4251.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asudoh asudoh

Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Projects
None yet
Milestone
Sprint 20-25
Development

No branches or pull requests
3 participants
@asudoh @jeffchew @RobertaJHahn