https://github.com/nativescript-community/solid-js

SolidJS for NativeScript
https://github.com/nativescript-community/solid-js

dominative nativescript solidjs

Last synced: 4 days ago
JSON representation

SolidJS for NativeScript

• Host: GitHub
• URL: https://github.com/nativescript-community/solid-js
• Owner: nativescript-community
• License: mit
• Created: 2022-09-29T21:16:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-29T12:00:47.000Z (5 months ago)
• Last Synced: 2024-10-29T21:54:16.820Z (3 months ago)
• Topics: dominative, nativescript, solidjs
• Language: JavaScript
• Homepage:
• Size: 164 KB
• Stars: 57
• Watchers: 16
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NativeScript SolidJS

### **Custom render and patches for SolidJS to work with [DOMiNATIVE](https://github.com/SudoMaker/DOMiNATIVE) on [NativeScript](https://nativescript.org/)**

[Playground](https://stackblitz.com/edit/nativescript-dominative-solid?file=app/app.jsx)

---

## Installation

Via npm:

```shell

npm install @nativescript-community/solid-js dominative undom-ng solid-js @babel/preset-typescript babel-preset-solid

```

**Note:** `dominative`, `undom-ng`, `solid-js` are peer dependencies, you have to install them manually. As the benefit for using peer dependencies, you'll be able to upgrade these dependencies directly from upstream, no need to wait for an update with `@nativescript-community/solid-js`

---

## Usage

```jsx

import { Application } from "@nativescript/core"

import { render } from "@nativescript-community/solid-js"

import { createSignal } from "solid-js"

document.body.actionBarHidden = false

const App = () => {

	const [count, setCount] = createSignal(0)

	const increment = () => {

		setCount(c => c + 1)

	}

	return <>

	

	

		You have taapped {count()} time(s)

		Tap me!

	

	>

}

const create = () => {

	render(App, document.body)

	return document

}

Application.run({ create })

```

---

## Caveats

### Event handling

Use `on:raw-EventName` and `oncapture:RawEvent-Name` to register event handlers instead of `on___`. It may be a little annoying, but NativeScript uses case sensitive event names and don't have native event bubbling, which means delegation couldn't function.

To enable capture and bubble phase of an event, please refer to this [doc](https://github.com/SudoMaker/DOMiNATIVE#tweakabledefineeventoptioneventname-string-option-eventoption)

## License

MIT