arthurclemens / mithril-hooks Goto Github PK

Hi @ArthurClemens, first of all, I love what you did with polythene, awesome!

We've implemented polythene-mithril into our project and it works like a charm :-) The only issue is running tests with jest/mithril-query. Our testing is setup with jest, jsdom and [email protected] and we get the following error when running our tests since adding polythene-mithril:

$ jest --detectOpenHandles
 FAIL  tests/happy.test.ls (5.155 s)
  ✕ view_dashboard (1962 ms)

  ● view_dashboard

    TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Document'
        --- property '_previousSibling' closes the circle
        at JSON.stringify (<anonymous>)

      30 |     view_dashboard = require '/src/views/startblock/dashboarding/view_dashboard'
    > 31 |     out = mq view_dashboard, actions: actions
         |           ^
      32 |
      33 |     # Check if there are loader components active

      at instanceClass (node_modules/cyano-mithril/node_modules/mithril-hooks/dist/mithril-hooks.mjs:105:40)
      at deps (node_modules/polythene-core-base-spinner/src/index.js:60:15)
      at Object.oncreate (node_modules/cyano-mithril/node_modules/mithril-hooks/dist/mithril-hooks.mjs:114:65)
      at Function.callHook (node_modules/mithril/render/render.js:30:16)
      at node_modules/mithril/render/render.js:971:50
      at redraw (node_modules/mithril-query/index.js:246:24)
      at init (node_modules/mithril-query/index.js:248:3)
      at Object.<anonymous> (tests/happy.test.ls:31:11)

I tried to exclude the spinner, and then it threw the same error exception for polythene-core-textfield in stead of polythene-core-base-spinner.

It's probably an incompatibility between mithril-query and mithril-hooks and I was wondering if you might be able to help understanding what the issue is. The exception seems to occur on line https://github.com/ArthurClemens/mithril-hooks/blob/master/packages/mithril-hooks/src/index.ts#L144 in your source.

I'm quite clueless in how to resolve this issue, so any help would be appreciated!

React hooks will call the teardown function each time the effect is restarted to perform any necessary cleanup. Mithril hooks does not do this atm.

Example flems

As you change the values in the input new event listeners are added, but never removed (until component unmounts).

I'm not sure if much can be done about this, and it might have more to do with how dom refs are handled than hooks themselves (ref vs oncreate), but I figured I'd file it to see what you think.

I have 3 example of a custom hook that I wrote, worked well in preact/react, but not when I tried converting to mithril. My current thought is that it has to do with a different in priority for useState updates during a redraw.. but I haven't dug too deep.

The issue is that after calling setElem from the oncreate lifecycle hook in mithril, the useLayoutEffect hook is not called quickly enough to allow me to animate the element.

React
Preact
Mithril

I managed to get it basically working for mithril, by calling the onenter function from the setter rather than waiting for the useLayoutEffect hook to fire again.

Working mithril hooks version

Feel free to close this if it seems out of scope/irrelevant.

Hi,

I am currently working with Mithril.js and I came across an interesting feature in React that I would like to replicate. In React, we have hooks, such as useState and useEffect, which provide a convenient way to manage state and perform side effects within a functional component.

I have a specific use case where I want to replicate the functionality of the useDetails hook from React. The code snippet below demonstrates how it is used in React:

<State>
  {([]) => {
    const { getDetailsProps, open, setOpen } = useDetails({ closeOnOutsideClick: true });
    const { onToggle, ...detailsProps } = getDetailsProps();
    const customToggle = e => {
      onToggle(e);
      window.alert('hi');
    };
    return (
      <Details {...detailsProps} onToggle={customToggle}>
        <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
        Hello World
      </Details>
    );
  }}
</State>

This code utilizes the useDetails hook to handle the state and functionality of a Details component. The open state value determines whether the details are open or closed, and the onToggle function is called when the details are toggled. Additionally, an alert is shown with the message “hi” when the toggle happens.

I would like to achieve a similar functionality in Mithril.js but I am not sure how to approach it. Could you please provide guidance on how I can implement a custom hook in Mithril.js to handle this use case?

Thank you in advance for your assistance!

Hi!

First of all, this library is an excellent idea and I love it so far.

I found an issue on Storybook that could be a another good idea to fix.

I looked at your code but I didn't found where it failed 😄

With a simple "Storybook for Mithril" and a simple story and component, it failed.

File stories/hooks.stories.js

import m from 'mithril';

import {
	storiesOf
} from '@storybook/mithril';

import HookTest from "../components/test.js";

storiesOf('HookTest', module)
	.add('basic process', () => {
		return {
			view: () => m(HookTest)
		};
	})

File: components/test.js

import m from "mithril";

import {
    withHooks,
    useEffect,
    useState,
} from "mithril-hooks";

export default withHooks(function() {

    const [ count, set ] = useState(0);

    useEffect(() => {
        console.log(count);
        set(count + 1);
    }, []);

    return m('div', "hello");
});

In the result, you should have the console.log(count); showing 0 indefinitely in the console of the browser 😄

I hope you'll figure it out better than me on your library.

Thx a lot for your work!

TypeError: Cannot read properties of undefined (reading 'statesIndex')
at updateState (MithrilHooks.ts:80:23)

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency eslint-plugin-cypress to v2.15.2
• Update dependency npm-check-updates to v16.14.20
• Update dependency start-server-and-test to v2.0.4
• Update dependency vite to v4.5.3
• Update dependency eslint to v8.57.0
• Update dependency eslint-plugin-jest-dom to v5.4.0
• Update dependency flatted to v3.3.1
• Update dependency prettier to v3.3.2
• Update dependency react to v18.3.1
• Update dependency typescript to v5.4.5
• Update typescript-eslint monorepo to v6.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update dependency bulma to v1
• Update dependency eslint to v9
• Update dependency eslint-plugin-cypress to v3
• Update dependency eslint-plugin-json to v4
• Update dependency eslint-plugin-simple-import-sort to v12
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Replace dependency npm-run-all with npm-run-all2 ^5.0.0
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency cypress to v13
• Update dependency eslint-config-next to v14
• Update dependency eslint-config-prettier to v9
• Update dependency postcss-cli to v11
• Update dependency ubuntu to v22
• Update dependency vite to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository