Giter VIP home page Giter VIP logo

react's Introduction

Cycle.js

logo
A functional and reactive JavaScript framework for predictable code

Welcome

Question Answer
"I want to learn Cycle.js" Read the official documentation
"I have a question" Create a StackOverflow question
Or
Join the chat
Or
Open an issue
Please note all discussion-like issues are labeled discussion and immediately closed. This doesn't mean we unconsidered your discussion. We only leave actual issues open.
"I found a bug" Open an issue
"I want to help build Cycle.js" Read the Contributing guides
Then
Choose an issue marked "help wanted"

Packages

Cycle.js is comprised of many specialized packages. This repository contains all these packages, e.g., the npm package @cycle/run lives in the directory run. Below you will find a summary of each package.

Package Version Dependencies DevDependencies
@cycle/dom npm (scoped) Dependency Status devDependency Status
@cycle/history npm (scoped) Dependency Status devDependency Status
@cycle/html npm (scoped) Dependency Status devDependency Status
@cycle/http npm (scoped) Dependency Status devDependency Status
@cycle/isolate npm (scoped) Dependency Status devDependency Status
@cycle/most-run npm (scoped) Dependency Status devDependency Status
@cycle/run npm (scoped) Dependency Status devDependency Status
@cycle/rxjs-run npm (scoped) Dependency Status devDependency Status

Globally: Build Status devDependency Status

Stream libraries

The following packages are not under Cycle.js, but are important dependencies, so we display their latest versions for convenience.

Package Version
most npm version
rxjs npm version
xstream npm version

Support OpenCollective OpenCollective

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Thanks

Browserstack

Browserstack for providing access to their great cross-browser testing tools.

LICENSE

The MIT License


JS.ORG ComVer

react's People

Contributors

jopek avatar ntilwalli avatar sarimarton avatar sliptype avatar staltz avatar wclr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react's Issues

Configure peerDependencies to avoid duplicated React instances in bundles

React instances are duplicated when using cycle/react, because cycle/react defines react as a regular dependency instead of a peerDependency in package.json. This not only bloats the bundle files up, but also makes writing extensions harder, because in some low-level cases, these instances can mix up (especially when I'm playing with JSX pragmas). Currently these are regular dependencies package.json:

  "dependencies": {
    "@cycle/run": "5.x.x",
    "react": "16.5.x",
    "xstream": "11.x.x"
  },

I think all of these should be in the peerDependencies block.

No event listener when importing from other package

I'm having some problems using cycle-react in my own components if these are imported from other packages.

When importing the hyperscript function directly from cycle/react everything works fine. But when I import a HOC from another package, things start to not work as expected.

For what I can debug, ForwardRefs are created ok. However, no event listener is attached to the html element. In this screenshot, the element in the second button appears with no handler using react devTools.

I've created a repo that reproduces this issue using a lerna monorepo.

no-handler

No render when combining non-trivial components and having drivers

Full code here: https://codesandbox.io/s/quirky-butterfly-0pdjd?file=/src/index.ts

function main(sources: any) {
  const counter = Counter(sources, xs.of(2));
  const other = Counter(sources, xs.of(1));
  return {
    react: xs
      .combine(counter.DOM, other.DOM)
      .map((els) => h("div", els))
  };
}

const App = makeComponent(main, {});

render(h(App), document.getElementById("app"));

Given the code above, I get an empty webpage with no components rendered, even though the DOM stream does fire with valid component data.

I can make this work by either removing drivers:

makeComponent(main)

or by replacing my Counter components with something trivial:

.combine(
  xs.of(h("div", "one")),
  xs.of(h("div", "two"))
)

I suspect that there is a bug somewhere in makeComponent code where it branches on non-null drivers argument, but I haven't done any actual investigation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.