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.

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

Update isomorphic example to use @cycle/html #686

Open
jvanbruegge opened this Issue Sep 27, 2017 · 22 comments

Comments

Projects
None yet
8 participants
@jvanbruegge
Member

jvanbruegge commented Sep 27, 2017

The code would not even compile with the newest version.

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 1, 2017

Hi! Is this your project? I would like to help with this, if you will have me as a contributor - after browsing Hactoberfest projects it seems like the most interesting. I have never used typescript but have worked as a C# and javascript developer, so pretty sure I can get up to speed in a day or two. I am pretty good with functional programming, I know Erlang and Haskell.

acstott commented Oct 1, 2017

Hi! Is this your project? I would like to help with this, if you will have me as a contributor - after browsing Hactoberfest projects it seems like the most interesting. I have never used typescript but have worked as a C# and javascript developer, so pretty sure I can get up to speed in a day or two. I am pretty good with functional programming, I know Erlang and Haskell.

@Widdershin

This comment has been minimized.

Show comment
Hide comment
@Widdershin

Widdershin Oct 1, 2017

Member

@acstott @jvanbruegge and I are core contributors to the Cycle project.

We would love to have you as a contributor! 😸

Are you interested in working on this issue specifically? If so we can assign it to you, help you if you get stuck, and review and merge your code.

Member

Widdershin commented Oct 1, 2017

@acstott @jvanbruegge and I are core contributors to the Cycle project.

We would love to have you as a contributor! 😸

Are you interested in working on this issue specifically? If so we can assign it to you, help you if you get stuck, and review and merge your code.

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 1, 2017

acstott commented Oct 1, 2017

@jvanbruegge

This comment has been minimized.

Show comment
Hide comment
@jvanbruegge

jvanbruegge Oct 1, 2017

Member

do you have yarn installed? And did you run make setup?

Member

jvanbruegge commented Oct 1, 2017

do you have yarn installed? And did you run make setup?

@Widdershin

This comment has been minimized.

Show comment
Hide comment
@Widdershin

Widdershin Oct 1, 2017

Member
Member

Widdershin commented Oct 1, 2017

@jvanbruegge jvanbruegge changed the title from Update isomorphic example to use @cycle/http to Update isomorphic example to use @cycle/html Oct 1, 2017

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 1, 2017

acstott commented Oct 1, 2017

@jvanbruegge

This comment has been minimized.

Show comment
Hide comment
@jvanbruegge

jvanbruegge Oct 1, 2017

Member

That error is harmless, you can ignore it

Member

jvanbruegge commented Oct 1, 2017

That error is harmless, you can ignore it

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 1, 2017

acstott commented Oct 1, 2017

@jvanbruegge

This comment has been minimized.

Show comment
Hide comment
@jvanbruegge

jvanbruegge Oct 1, 2017

Member

thatbwas a typo, i meant html. In the past, we splitted the dom driver into dom (for the browser) and html (for the server). The example uses old versions.

Member

jvanbruegge commented Oct 1, 2017

thatbwas a typo, i meant html. In the past, we splitted the dom driver into dom (for the browser) and html (for the server). The example uses old versions.

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 1, 2017

acstott commented Oct 1, 2017

@Widdershin

This comment has been minimized.

Show comment
Hide comment
@Widdershin

Widdershin Oct 1, 2017

Member

I think we still want to have a separate app, client.js and server.js files.

First thing, we want to ensure that all of the @cycle packages are depending on the latest published version.

As Jan mentioned, we used to have makeHTMLDriver and makeDOMDriver in the same package, @cycle/dom. A while ago, we split makeHTMLDriver out into @cycle/html.

You can see in server.js we are still importing makeHTMLDriver from @cycle/html, so after updating the packages, you'll want to also install @cycle/html and change the server.js to import makeHTMLDriver from @cycle/html.

After that, it might just work, or it might need a bit more. Does that seem reasonable?

Member

Widdershin commented Oct 1, 2017

I think we still want to have a separate app, client.js and server.js files.

First thing, we want to ensure that all of the @cycle packages are depending on the latest published version.

As Jan mentioned, we used to have makeHTMLDriver and makeDOMDriver in the same package, @cycle/dom. A while ago, we split makeHTMLDriver out into @cycle/html.

You can see in server.js we are still importing makeHTMLDriver from @cycle/html, so after updating the packages, you'll want to also install @cycle/html and change the server.js to import makeHTMLDriver from @cycle/html.

After that, it might just work, or it might need a bit more. Does that seem reasonable?

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 2, 2017

acstott commented Oct 2, 2017

@Widdershin

This comment has been minimized.

Show comment
Hide comment
@Widdershin

Widdershin Oct 2, 2017

Member

there is a package.json file within the example directory as well as within the source for cyclejs - I am assuming both of these need to be updated?

As far as I can see, all of the changes for this issue will take place in the examples/isomorphic/ directory.

So by updating the packages, I mean editing examples/isomorphic/package.json such that all of the versions match the latest version published on npm. So the latest version of @cycle/dom on npm is 18.3.0, so we would change this line:

- "@cycle/dom": "15.0.0-rc.3"
+ "@cycle/dom": "18.3.0"

The same for @cycle/run and also xstream for good measure.

We would also then add @cycle/html as a dependency.

@cycle/dom isn't deprecated, it's still the driver that's used for interacting with the DOM. It just used to be that it also contained the HTML driver, which generates HTML strings from the virtual dom stream provided to it, whereas the DOM driver updates the DOM using the virtual dom stream provided to it.

Member

Widdershin commented Oct 2, 2017

there is a package.json file within the example directory as well as within the source for cyclejs - I am assuming both of these need to be updated?

As far as I can see, all of the changes for this issue will take place in the examples/isomorphic/ directory.

So by updating the packages, I mean editing examples/isomorphic/package.json such that all of the versions match the latest version published on npm. So the latest version of @cycle/dom on npm is 18.3.0, so we would change this line:

- "@cycle/dom": "15.0.0-rc.3"
+ "@cycle/dom": "18.3.0"

The same for @cycle/run and also xstream for good measure.

We would also then add @cycle/html as a dependency.

@cycle/dom isn't deprecated, it's still the driver that's used for interacting with the DOM. It just used to be that it also contained the HTML driver, which generates HTML strings from the virtual dom stream provided to it, whereas the DOM driver updates the DOM using the virtual dom stream provided to it.

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 2, 2017

acstott commented Oct 2, 2017

@BrianDGLS

This comment has been minimized.

Show comment
Hide comment
@BrianDGLS

BrianDGLS Oct 8, 2017

I added #711 as a proposal for this.

It updates the example to use a cyc generated isomorphic example.

A benefit of using an example generated from a cli is that the user will also learn about a tool that can be used to scaffold their application.

BrianDGLS commented Oct 8, 2017

I added #711 as a proposal for this.

It updates the example to use a cyc generated isomorphic example.

A benefit of using an example generated from a cli is that the user will also learn about a tool that can be used to scaffold their application.

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 8, 2017

acstott commented Oct 8, 2017

@psychowico

This comment has been minimized.

Show comment
Hide comment
@psychowico

psychowico Oct 15, 2017

Contributor

Hi ppl. @BrianDGLS it looks like cyc is abandoned, so it isn't best idea to recommend it unless someone will take care on this project again.

Contributor

psychowico commented Oct 15, 2017

Hi ppl. @BrianDGLS it looks like cyc is abandoned, so it isn't best idea to recommend it unless someone will take care on this project again.

@AaronRohrbacher

This comment has been minimized.

Show comment
Hide comment
@AaronRohrbacher

AaronRohrbacher Oct 23, 2017

I'll throw this out there... I think you need to install typeScript globally first, then compile the typeScript into javaScript (this allows you to use ES6 features and optional typing features). Global: $ npm install typescript -g. In the project directory (after writing your typescript): $ tsc app/YOURAPP.ts, which will create your js files. No?

AaronRohrbacher commented Oct 23, 2017

I'll throw this out there... I think you need to install typeScript globally first, then compile the typeScript into javaScript (this allows you to use ES6 features and optional typing features). Global: $ npm install typescript -g. In the project directory (after writing your typescript): $ tsc app/YOURAPP.ts, which will create your js files. No?

@acstott

This comment has been minimized.

Show comment
Hide comment
@acstott

acstott Oct 23, 2017

acstott commented Oct 23, 2017

@saniyatech

This comment has been minimized.

Show comment
Hide comment
@saniyatech

saniyatech Oct 27, 2017

You need someone to work on this issue?

saniyatech commented Oct 27, 2017

You need someone to work on this issue?

@rmeoc

This comment has been minimized.

Show comment
Hide comment
@rmeoc

rmeoc Mar 18, 2018

Contributor

I have looked into this a bit and I encountered the following:

The client-side app needs to listen to a click event, translate it to a virtual DOM node, and emit the virtual DOM node on its DOM sink. It does not emit an initial virtual DOM node on its DOM sink (it is dropped in client.js). The reason for this is that, unless the client-side app received any click events, the DOM is already up-to-date because the server-side app took care of this.

The difficulty I encountered is that it seems that since cycle/dom 20.0.0 an app does not receive any events from its DOM source unless it emits a virtual DOM node on its DOM sink. I think this behavior was introduced with the fix for issue #699.

To demonstrate this I have put a small example on jsbin.com:
https://jsbin.com/yavejopecu/1/edit?html,js,console,output
If you click on the "Click Here" button then nothing is sent to the console. If you modify the code to refer to cycle/dom 19.3.0 then clicking on the button does result in a click event being sent to the console.

My question is: what would be the correct behavior for my code on jsbin. Is it to be expected that a application doesn't receive any events from its DOM source if it never emits anything on its DOM sink? Or is this perhaps a bug?

Contributor

rmeoc commented Mar 18, 2018

I have looked into this a bit and I encountered the following:

The client-side app needs to listen to a click event, translate it to a virtual DOM node, and emit the virtual DOM node on its DOM sink. It does not emit an initial virtual DOM node on its DOM sink (it is dropped in client.js). The reason for this is that, unless the client-side app received any click events, the DOM is already up-to-date because the server-side app took care of this.

The difficulty I encountered is that it seems that since cycle/dom 20.0.0 an app does not receive any events from its DOM source unless it emits a virtual DOM node on its DOM sink. I think this behavior was introduced with the fix for issue #699.

To demonstrate this I have put a small example on jsbin.com:
https://jsbin.com/yavejopecu/1/edit?html,js,console,output
If you click on the "Click Here" button then nothing is sent to the console. If you modify the code to refer to cycle/dom 19.3.0 then clicking on the button does result in a click event being sent to the console.

My question is: what would be the correct behavior for my code on jsbin. Is it to be expected that a application doesn't receive any events from its DOM source if it never emits anything on its DOM sink? Or is this perhaps a bug?

@rmeoc

This comment has been minimized.

Show comment
Hide comment
@rmeoc

rmeoc Mar 20, 2018

Contributor

Is it to be expected that a application doesn't receive any events from its DOM source if it never emits anything on its DOM sink? Or is this perhaps a bug?

I'm actually pretty sure that this is a bug so I have created a separate issue for this: #791.

Contributor

rmeoc commented Mar 20, 2018

Is it to be expected that a application doesn't receive any events from its DOM source if it never emits anything on its DOM sink? Or is this perhaps a bug?

I'm actually pretty sure that this is a bug so I have created a separate issue for this: #791.

rmeoc added a commit to rmeoc/cyclejs that referenced this issue May 13, 2018

@rmeoc rmeoc referenced this issue May 13, 2018

Open

Update isomorphic example to use @cycle/html #812

2 of 3 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment