Comments (14)
Hello, have you looked here: https://github.com/MithrilJS/mithril.d.ts?
from mithril.js.
None of those patterns seem to work for my component shape. I tried this:
const MyComponent = (): m.Component<myAttrs, myState> => ({
tag: "MyComponent",
title: "<placeholder>",
oninit: ({attrs, state}) => {<set title>},
onbeforeupdate: ({attrs, state}) => {<update title>},
attrs: () => {},
state: () => {},
view: ({attrs, state}) =>
<p>My component: {state.title}</p>
});
And ts complains about the tag, title, attrs, and state fields:
Object literal may only specify known properties, and 'attrs' does not exist in type 'Component<myAttrs, myState>
But if I remove them, I get
MyComponent ' cannot be used as a JSX component.
Its return type 'Component<myAttrs, myState>' is not a valid JSX element.
Type 'Component<myAttrs, myState>' is missing the following properties from type 'Vnode<{}, {}>': tag, attrs, state
It's been awhile since I chose that particular component shape, so I don't know why I chose it...beyond the fact that ts seems to insist on it.
from mithril.js.
I'm not familiar with Typescript, so I can't help you, sorry. Hopefully someone else can.
from mithril.js.
Typescript does not mix with mithril.
mithril is a front-end component that follows ecmascript. typescript is a superset of ecmascript.
from mithril.js.
OK, thanks. Will close.
If anyone knows how to make this work, please share. Also, would love to know the recommended way to include JSX.Element, that would really help. I'm asking because the way(s) I tried didn't appear to work (or seemed overly convoluted to be right.)
from mithril.js.
@EverettMcKay Feel free to ignore that prior comment. It's wrong and they got kicked out for similarly low quality comments in other issues.
Our current recommendation (due to a number of TS type checker-related issues) is to use TSX with m
as the pragma and m.Fragment
as the fragment component type.
And TS in general currently requires you to specify a return value of JSX.Element
for function components (there's an open issue about this, but I'm on mobile), which is incompatible with Mithril's closure components, so our current recommendation is instead to use class components universally.
from mithril.js.
Thank you. Could you provide a typescript declaration I could use for JSX.Element? That will take me to the next level (so I don't have to return "any").
from mithril.js.
Thank you. Could you provide a typescript declaration I could use for JSX.Element? That will take me to the next level (so I don't have to return "any").
That namespace definition should exist by simply importing Mithril, assuming you're using @types/mithril
.
from mithril.js.
I have confirmed that I have @types/mithril, but when I refer to JSX, I get "'JSX' is not defined". If I import explicitly, I get "Module '"mithril"' has no exported member 'JSX'.".
from mithril.js.
Never mind. It was installed, but I installed again (to be sure), and it's working now. Thanks!
from mithril.js.
Never mind. It was installed, but I installed again (to be sure), and it's working now. Thanks!
If you were just checking in your editor @EverettMcKay, I've had success just restarting the TS server and/or editor in picking up global augments. The language server can be a bit finicky sometimes with that.
from mithril.js.
Awesome. Thanks again for your help!
from mithril.js.
Weird...the definition of JSX.Element somehow disappeared again. Restarting the TS server did not fix it.
The exact error: 'JSX' is not defined.
from mithril.js.
@EverettMcKay In any case, you'll get better luck asking around in TS-specific communities instead.
They can help you figure out your setup issue and resolve it for good.
from mithril.js.
Related Issues (20)
- Can I Mithril for server-side components? HOT 3
- I can prevent a mithril component from scrolling to the top on a rerender. HOT 5
- Confused about component redraws (and keys) HOT 8
- Why are v.attrs passed to oninit() for a child component an empty object? HOT 5
- There is no onsize/onresize lifecycle method HOT 4
- warning 'reuse attrs object' while receiving a component from high order function/component HOT 4
- Broken link to ospec in API page
- make vite the default HOT 4
- Redraw on resolve of async event handler HOT 1
- Please update the Vue comparison HOT 1
- onbeforeremove not being triggered when list element is removed HOT 2
- Form attribute not set in custom element HOT 1
- Add "main" field to package.json
- Need help with "Failed to execute 'insertBefore' on 'Node'" errors. HOT 2
- Is there a bug with dynamically changing svgs? HOT 15
- Current vnode `dom` property is undefined in `onbeforeupdate` HOT 4
- Not getting any events to handle resize HOT 1
- Been a while since the last commit, is Mithril complete? or abandoned? HOT 12
- We have both `main` and `master`. Let's drop both and just rely on a global `next` + version-specific `next`s. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mithril.js.