Replies: 8 comments 11 replies
-
|
I've started making a spinning Web Browser in Crank Native: https://play.nativescript.org/?template=play-react&id=LB4qRS&v=4 It accesses native iOS methods to inject some JS into the webpage to make things, uh, spin.
|
Beta Was this translation helpful? Give feedback.
-
|
Built an iOS SpriteKit game launcher in Crank Native, which confirms that the NativeScript Playground supports generators! https://play.nativescript.org/?template=play-react&id=ptkGyA&v=8
|
Beta Was this translation helpful? Give feedback.
-
|
I came across this on Twitter: https://codesandbox.io/embed/crankjs-final-form-jk3q9?file=/src/index.js&codemirror=1 |
Beta Was this translation helpful? Give feedback.
-
|
I copied the code examples from https://crank.js.org/guides/components to https://observablehq.com/@btheado/crank-js and translated them to use htm. All the examples are live-editable and runnable. When I first read about crank.js the other day, I was reminded of the way observablehq uses generators and async generators. I haven't yet compare/contrasted them, so I don't know how similar they are. I thought I'd play with crank on observable with the eventual goal of finding out. The above page is the result. Update: I also added the code examples from https://crank.js.org/guides/async-components. In addition, I found this other example also on observable: https://observablehq.com/@radames/hello-crank-js |
Beta Was this translation helpful? Give feedback.
-
|
I just put this together using the undocumented /** @jsx createElement */
import { createElement, Fragment } from "@bikeshaving/crank";
import { renderer } from "@bikeshaving/crank/dom";
function Avatar() {
const user = this.get("user");
return <img alt={`${user.first_name} ${user.last_name}`} src={user.avatar} />;
}
function User() {
const user = this.get("user");
return (
user && (
<div>
<p>{user.first_name}</p>
<Avatar image={user.avatar} />
</div>
)
);
}
async function* App() {
try {
let value = "";
const onChange = e => {
value = e.target.value;
this.refresh();
};
const onSubmit = async (e) => {
e.preventDefault();
const response = await fetch(`https://reqres.in/api/users/${value}`);
const user = await response.json();
this.set("user", user.data);
this.refresh();
};
for await (let _ of this) {
yield (
<Fragment>
<form onsubmit={onSubmit}>
<label for="userSelector">Select a User Number (1 - 10)</label>
<input
value={value}
onchange={onChange}
id="userSelector"
type="number"
max="10"
min="1"
/>
<button type="submit">Get new User</button>
</form>
<p>Selected Number: {value}</p>
<User />
</Fragment>
);
}
} catch (error) {
return <h1>error getting data </h1>;
}
}
renderer.render(<App />, document.body);The Also - |
Beta Was this translation helpful? Give feedback.
-
|
This will work around the eslint warning async function* App() {
try {
let value = "";
const onChange = e => {
value = e.target.value;
this.refresh();
};
const onSubmit = async e => {
e.preventDefault();
const response = await fetch(`https://reqres.in/api/users/${value}`);
const user = await response.json();
this.set("user", user.data);
this.refresh();
};
const props = this[Symbol.asyncIterator]();
while (true) {
await props.next();
yield (
<Fragment>
<form onsubmit={onSubmit}>
<label for="userSelector">Select a User Number (1 - 10)</label>
<input
value={value}
onchange={onChange}
id="userSelector"
type="number"
max="10"
min="1"
/>
<button type="submit">Get new User</button>
</form>
<p>Selected Number: {value}</p>
<User />
</Fragment>
);
}
} catch (error) {
return <h1>error getting data </h1>;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
That‘s definitely a way to do it @lazeebee. Honestly though I’m always hesitant to put |
Beta Was this translation helpful? Give feedback.
-
|
Agreed we’ll have to build an Eslint plugin that allows this. It could also warn you of using while true in async generators, etc |
Beta Was this translation helpful? Give feedback.
-
|
I’ve just discovered that you can do |
Beta Was this translation helpful? Give feedback.
-
|
Here‘s the XState calculator example in Crank: https://codesandbox.io/s/xstate-calculator-with-crankjs-u9r0f?file=/src/index.tsx I see that there could probably be some kinda of plugin created which refreshes on transition automatically I just don’t know what it should look like yet. In the meantime it just works with a couple helper functions and an explicit refresh call. |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/brainkim/crank-three-boxes Three.js boxes demo. Couldn’t get it to work in Code Sandbox for some reason. If you are interested in writing a Three.js renderer for Crank reach out and I will guide you through the forbidden/unstable renderer APIs. |
Beta Was this translation helpful? Give feedback.
-
|
Just playing around with Material Design components (actually, "component", at the moment; only a Button so far) with Crank: |
Beta Was this translation helpful? Give feedback.
-
Well, since you offered... I've pushed a new commit of my https://github.com/jonrsawyer/crank-material repo with a problem. I suspect the problem is that the Crank.js diffing algorithm may not be handling SVG elements properly. If you "npm start" the repo, you'll see two checkboxes that appear differently when checked. The first checkbox is created from a Crank component; the second is statically declared in the index.html file. The SVG path for the checkmark does not appear in the former. I'm kinda out of my depth here, but https://stackoverflow.com/questions/10546135/appending-path-child-within-svg-using-javascript/10546700 seems like it may apply here. Or more likely, I'm doing something stupid... |
Beta Was this translation helpful? Give feedback.
-
|
I see this and promise to triage by tomorrow noon EST. I assure you I am the stupid one here, most likely. |
Beta Was this translation helpful? Give feedback.
-
|
I appreciate your "I see this" comment. FYI, I'm a real newbie at Github etiquette; was I supposed to do something to explicitly bring this to your attention? And another thing... I'm working on another set of components using async generators that consist of a parent component and a set of child components (Material design's ChipSet and Chip). In the parent component, I'm using the Finally: is there a better forum for these sorts of inquiries than continuing to extend the comments on an item in this "Examples!" discussion? |
Beta Was this translation helpful? Give feedback.
-
I see everything 👀 Working on adding SVG support in Crank right now. You can usually get the attention of people by @-ing them as in @brainkim. People will like/dislike this according to their personalities I guess.
Yes that is a consequence of yielding an element tree with an async component. The whole tree doesn’t commit until the async component has fulfilled, so it resumes with a promise of the result rather than the result itself. If you know none of the subtree is async though, you don’t have to add an extra await, which can be convenient. You typically know what was just yielded unless you’re dynamically rendering children.
You can create more discussions! And if you think there’s something actionable like a bug you can open an issue. As far as other places to discuss this stuff. It doesn’t really exist yet. We’ll play it by ear. Welcome to GitHub! |
Beta Was this translation helpful? Give feedback.
-
|
@jonrsawyer SVG support has been added in 0.1.4 |
Beta Was this translation helpful? Give feedback.
-
I see your comments and appreciate all the design feedback, but I must admit, writing long technical responses can be both intellectually and emotionally draining. Know that I see you and I will get back to you ASAP about my thoughts on all of this stuff.
One thing that I love more than anything is seeing examples! Have you made Snake or Tetris? Let me know in this issue 🙆♀️
Beta Was this translation helpful? Give feedback.
All reactions