react-native-yoga-jsi 0.0.3 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/cpp/nodeProperties.h +1 -1
- package/lib/commonjs/derived/utils.js +0 -2
- package/lib/commonjs/derived/utils.js.map +1 -1
- package/lib/module/derived/utils.js +0 -2
- package/lib/module/derived/utils.js.map +1 -1
- package/lib/typescript/src/derived/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/derived/utils.ts +0 -2
package/README.md
CHANGED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
> **⚠️ Experimental Warning**
|
|
2
|
+
> This library is in its experimental phase and may have breaking changes. It is considered **unstable** and may have issues. Do not use in production.
|
|
3
|
+
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## Supported Versions
|
|
7
|
+
|
|
8
|
+
| Platform | Supported Versions |
|
|
9
|
+
| ----------- | ------------------ |
|
|
10
|
+
| **iOS** | Above 0.73.0 |
|
|
11
|
+
| **Android** | 0.73.\* |
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Aim
|
|
16
|
+
|
|
17
|
+
This library aims to expose Yoga APIs to javascript, enabling advanced layout functionalities with any canvas or svg.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## APIs
|
|
22
|
+
|
|
23
|
+
### Core API
|
|
24
|
+
|
|
25
|
+
The core API is the same as Yoga's WASM bindings, enabling the use of any code that depends on yoga-wasm in React Native.
|
|
26
|
+
|
|
27
|
+
**Core API Docs:**
|
|
28
|
+
Refer to the official [Yoga documentation](https://www.yogalayout.dev/docs/about-yoga) for details on Yoga's features and usage.
|
|
29
|
+
|
|
30
|
+
### Derived API
|
|
31
|
+
|
|
32
|
+
The derived API is structured to feel like the standard React Native style API.
|
|
33
|
+
**Features:**
|
|
34
|
+
|
|
35
|
+
- Declarative syntax similar to React Native's existing StyleSheet API.
|
|
36
|
+
- More featues on the way.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Roadmap
|
|
41
|
+
|
|
42
|
+
| Feature | Status |
|
|
43
|
+
| ------------------------------------------- | -------------- |
|
|
44
|
+
| Core Yoga API bindings | ✅ Implemented |
|
|
45
|
+
| Derived React Native style like API | 🚧 In Progress |
|
|
46
|
+
| Performance optimizations | 🚧 In Progress |
|
|
47
|
+
| Write tests | 🚧 In Progress |
|
|
48
|
+
| Support more Android versions | 📝 Planned |
|
|
49
|
+
| Compatibility with Reanimated's UI thread | 📝 Planned |
|
|
50
|
+
| Spacer primitive (SwiftUI like) | 📝 Planned |
|
|
51
|
+
| Migrate to Nitro Module | 📝 Planned |
|
|
52
|
+
| Improved TypeScript support | 📝 Planned |
|
|
53
|
+
| Provide detailed documentation and examples | 📝 Planned |
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Examples
|
|
58
|
+
|
|
59
|
+
Here are a few examples demonstrating the use of this library:
|
|
60
|
+
|
|
61
|
+
### Example 1: Text Layout with Core API
|
|
62
|
+
|
|
63
|
+
[View Example](./testProj/src/navigators/children/TextLayout/TextLayout.tsx)
|
|
64
|
+
|
|
65
|
+
### Example 2: Animated Layout with Derived API
|
|
66
|
+
|
|
67
|
+
[View Example](./testProj/src/navigators/children/AnimatedExample/AnimatedExample.tsx)
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Contribution
|
|
72
|
+
|
|
73
|
+
This library is experimental and open to contributions. Please submit issues, feature requests, or pull requests via the repository.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
Happy Coding! 🚀
|
package/cpp/nodeProperties.h
CHANGED
|
@@ -366,7 +366,7 @@ namespace nodeProperties
|
|
|
366
366
|
if (count > 1 && arguments[1].isNumber())
|
|
367
367
|
ownerHeight = arguments[1].getNumber();
|
|
368
368
|
|
|
369
|
-
if (count == 3)
|
|
369
|
+
if (count == 3 && arguments[2].isNumber())
|
|
370
370
|
direction = static_cast<YGDirection>(arguments[2].getNumber());
|
|
371
371
|
|
|
372
372
|
YGNodeCalculateLayout(node, ownerWidth, ownerHeight, direction);
|
|
@@ -42,7 +42,6 @@ class Layout {
|
|
|
42
42
|
}
|
|
43
43
|
function generateStyledLayout(layout) {
|
|
44
44
|
const layoutTree = new Layout(layout.key);
|
|
45
|
-
console.log('applying to: ', layout.key);
|
|
46
45
|
(0, _styleHandler.applyStyle)(layoutTree.layout[layout.key], layout.style);
|
|
47
46
|
(function _parse(treeItem, index, isArray, parentKey) {
|
|
48
47
|
if (isArray) {
|
|
@@ -53,7 +52,6 @@ function generateStyledLayout(layout) {
|
|
|
53
52
|
treeItem = treeItem;
|
|
54
53
|
if (parentKey !== null) {
|
|
55
54
|
const addedNode = layoutTree.addNodeTo(parentKey, treeItem.key, index);
|
|
56
|
-
console.log('applying to: ', treeItem.key);
|
|
57
55
|
(0, _styleHandler.applyStyle)(addedNode, treeItem.style);
|
|
58
56
|
}
|
|
59
57
|
if (treeItem.children) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_index","_interopRequireDefault","require","_styleHandler","e","__esModule","default","createLayout","styles","Layout","constructor","rootKey","config","Yoga","Config","create","setPointScaleFactor","root","Node","layout","addNodeTo","parentKey","key","index","parent","child","insertChild","getNode","free","freeRecursive","forEach","cb","generateStyledLayout","layoutTree","
|
|
1
|
+
{"version":3,"names":["_index","_interopRequireDefault","require","_styleHandler","e","__esModule","default","createLayout","styles","Layout","constructor","rootKey","config","Yoga","Config","create","setPointScaleFactor","root","Node","layout","addNodeTo","parentKey","key","index","parent","child","insertChild","getNode","free","freeRecursive","forEach","cb","generateStyledLayout","layoutTree","applyStyle","style","_parse","treeItem","isArray","o","i","addedNode","children"],"sourceRoot":"../../../src","sources":["derived/utils.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -36,7 +36,6 @@ class Layout {
|
|
|
36
36
|
}
|
|
37
37
|
export function generateStyledLayout(layout) {
|
|
38
38
|
const layoutTree = new Layout(layout.key);
|
|
39
|
-
console.log('applying to: ', layout.key);
|
|
40
39
|
applyStyle(layoutTree.layout[layout.key], layout.style);
|
|
41
40
|
(function _parse(treeItem, index, isArray, parentKey) {
|
|
42
41
|
if (isArray) {
|
|
@@ -47,7 +46,6 @@ export function generateStyledLayout(layout) {
|
|
|
47
46
|
treeItem = treeItem;
|
|
48
47
|
if (parentKey !== null) {
|
|
49
48
|
const addedNode = layoutTree.addNodeTo(parentKey, treeItem.key, index);
|
|
50
|
-
console.log('applying to: ', treeItem.key);
|
|
51
49
|
applyStyle(addedNode, treeItem.style);
|
|
52
50
|
}
|
|
53
51
|
if (treeItem.children) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Yoga","applyStyle","createLayout","styles","Layout","constructor","rootKey","config","Config","create","setPointScaleFactor","root","Node","layout","addNodeTo","parentKey","key","index","parent","child","insertChild","getNode","free","freeRecursive","forEach","cb","generateStyledLayout","layoutTree","
|
|
1
|
+
{"version":3,"names":["Yoga","applyStyle","createLayout","styles","Layout","constructor","rootKey","config","Config","create","setPointScaleFactor","root","Node","layout","addNodeTo","parentKey","key","index","parent","child","insertChild","getNode","free","freeRecursive","forEach","cb","generateStyledLayout","layoutTree","style","_parse","treeItem","isArray","o","i","addedNode","children"],"sourceRoot":"../../../src","sources":["derived/utils.ts"],"mappings":";;AACA,OAAOA,IAAI,MAAM,UAAU;AAC3B,SAASC,UAAU,QAAwB,gBAAgB;AAU3D,OAAO,SAASC,YAAYA,CAAmBC,MAAmB,EAAE;EAClE,OAAOA,MAAM;AACf;AAEA,MAAMC,MAAM,CAAmB;EAI7BC,WAAWA,CAACC,OAAU,EAAE;IACtB,MAAMC,MAAM,GAAGP,IAAI,CAACQ,MAAM,CAACC,MAAM,CAAC,CAAC;IACnCF,MAAM,CAACG,mBAAmB,CAAC,CAAC,CAAC;IAC7B,MAAMC,IAAI,GAAGX,IAAI,CAACY,IAAI,CAACH,MAAM,CAACF,MAAM,CAAC;IACrC,IAAI,CAACD,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACO,MAAM,GAAG;MACZ,CAACP,OAAO,GAAGK;IACb,CAAoB;EACtB;EAEAG,SAASA,CAACC,SAAY,EAAEC,GAAM,EAAEC,KAAa,EAAE;IAC7C,MAAMC,MAAM,GAAG,IAAI,CAACL,MAAM,CAACE,SAAS,CAAC;IACrC,MAAMI,KAAK,GAAGnB,IAAI,CAACY,IAAI,CAACH,MAAM,CAAC,CAAC;IAChCS,MAAM,CAACE,WAAW,CAACD,KAAK,EAAEF,KAAK,CAAC;IAChC,IAAI,CAACJ,MAAM,CAACG,GAAG,CAAC,GAAGG,KAAK;IACxB,OAAOA,KAAK;EACd;EAEAE,OAAOA,CAACL,GAAM,EAAE;IACd,OAAO,IAAI,CAACH,MAAM,CAACG,GAAG,CAAC;EACzB;EAEAM,IAAIA,CAAA,EAAG;IACL,IAAI,CAACD,OAAO,CAAC,IAAI,CAACf,OAAO,CAAC,CAACiB,aAAa,CAAC,CAAC;EAC5C;EAEAC,OAAOA,CAACC,EAAgC,EAAE;IACxC,KAAK,MAAMT,GAAG,IAAI,IAAI,CAACH,MAAM,EAAE;MAC7BY,EAAE,CAAC,IAAI,CAACZ,MAAM,CAACG,GAAG,CAAC,EAAEA,GAAG,CAAC;IAC3B;EACF;AACF;AAIA,OAAO,SAASU,oBAAoBA,CAAmBb,MAAmB,EAAE;EAC1E,MAAMc,UAAU,GAAG,IAAIvB,MAAM,CAACS,MAAM,CAACG,GAAG,CAAC;EACzCf,UAAU,CAAC0B,UAAU,CAACd,MAAM,CAACA,MAAM,CAACG,GAAG,CAAC,EAAEH,MAAM,CAACe,KAAK,CAAC;EACvD,CAAC,SAASC,MAAMA,CACdC,QAAqB,EACrBb,KAAa,EACbc,OAAgB,EAChBhB,SAAmB,EACnB;IACA,IAAIgB,OAAO,EAAE;MACVD,QAAQ,CAAmBN,OAAO,CAAC,CAACQ,CAAC,EAAEC,CAAC,KAAK;QAC5CJ,MAAM,CAACG,CAAC,EAAEC,CAAC,EAAE,KAAK,EAAElB,SAAS,CAAC;MAChC,CAAC,CAAC;IACJ,CAAC,MAAM;MACLe,QAAQ,GAAGA,QAAuB;MAClC,IAAIf,SAAS,KAAK,IAAI,EAAE;QACtB,MAAMmB,SAAS,GAAGP,UAAU,CAACb,SAAS,CAACC,SAAS,EAAEe,QAAQ,CAACd,GAAG,EAAEC,KAAK,CAAC;QACtEhB,UAAU,CAACiC,SAAS,EAAEJ,QAAQ,CAACF,KAAK,CAAC;MACvC;MACA,IAAIE,QAAQ,CAACK,QAAQ,EAAE;QACrBN,MAAM,CAACC,QAAQ,CAACK,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAEL,QAAQ,CAACd,GAAG,CAAC;MAClD;IACF;IAEA,OAAOW,UAAU;EACnB,CAAC,EAAEd,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC;EAE1B,OAAOc,UAAU;AACnB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/derived/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI;IACvC,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAEtE,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,eAEjE;AAED,cAAM,MAAM,CAAC,CAAC,SAAS,MAAM;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,CAAC,CAAC;gBAEC,OAAO,EAAE,CAAC;IAUtB,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM;IAQ7C,OAAO,CAAC,GAAG,EAAE,CAAC;IAId,IAAI;IAIJ,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI;CAKzC;AAID,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/derived/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI;IACvC,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAEtE,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,eAEjE;AAED,cAAM,MAAM,CAAC,CAAC,SAAS,MAAM;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,CAAC,CAAC;gBAEC,OAAO,EAAE,CAAC;IAUtB,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM;IAQ7C,OAAO,CAAC,GAAG,EAAE,CAAC;IAId,IAAI;IAIJ,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI;CAKzC;AAID,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aA4BzE"}
|
package/package.json
CHANGED
package/src/derived/utils.ts
CHANGED
|
@@ -55,7 +55,6 @@ type TreeItem<T extends string> = NodeTree<T> | NodeTree<T>[];
|
|
|
55
55
|
|
|
56
56
|
export function generateStyledLayout<T extends string>(layout: NodeTree<T>) {
|
|
57
57
|
const layoutTree = new Layout(layout.key);
|
|
58
|
-
console.log('applying to: ', layout.key);
|
|
59
58
|
applyStyle(layoutTree.layout[layout.key], layout.style);
|
|
60
59
|
(function _parse(
|
|
61
60
|
treeItem: TreeItem<T>,
|
|
@@ -71,7 +70,6 @@ export function generateStyledLayout<T extends string>(layout: NodeTree<T>) {
|
|
|
71
70
|
treeItem = treeItem as NodeTree<T>;
|
|
72
71
|
if (parentKey !== null) {
|
|
73
72
|
const addedNode = layoutTree.addNodeTo(parentKey, treeItem.key, index);
|
|
74
|
-
console.log('applying to: ', treeItem.key);
|
|
75
73
|
applyStyle(addedNode, treeItem.style);
|
|
76
74
|
}
|
|
77
75
|
if (treeItem.children) {
|