glimmer-native's People
glimmer-native's Issues
Inline `{{if}}` helper does not re-render after condition updates to `false`
Given the following template:
The Label
's class will correctly change to "color-red"
when this.someProp
becomes true. However, if the property later changes back to false, the "color-red"
class will remain, instead of being removed like it should be.
Anything in a Layout is rendered in reverse
Anything using StackLayout, Dock Layout, FlexboxLayout etc is rendered in reverse order.
Seems to be an issue related to the utils, I think we just need to update https://github.com/bakerac4/glimmer-native/blob/master/src/dom/utils.ts#L46 to use ViewNode.
Implement IF helper correctly
Fixed by #5
#each having trouble with longer list
Reproduction project: https://github.com/CodingItWrong/todo-glimmer-native
I'm outputting an array with #each
:
@tracked
todos = [
'Try Glimmer Native',
'Make a Sample App',
'Make a Tutorial',
]
<StackLayout>
...
{{#each todos as |todo|}}
<Label text={{todo}} />
{{/each}}
</StackLayout>
I have two actions that update the array:
replaceTodos() {
this.todos = ['1', '2', '3']
}
replaceWithLongerArray() {
this.todos = ['A', 'B', 'C', 'D', 'E']
}
When I replaceTodos
with an array of the same length they display fine:
But when I replace with a longer list, the same number of items show, and the very last item is layered over the bottommost from the original array length:
Might the layout not be reflowing, so that all the items longer than the initial length overlap one another?
ListView Issues
ListView/RadListView have quickly become THE major thorn in my side while testing Glimmer Native out. We need to use ListView/RadListView because they provide native view recycling. Without them, rendering a large list of items would kill the app on the phone or at the very least slow it down greatly.
The following issues need to be fixed before a 1.0 release can happen
-
Tracked properties currently don't work inside a ListView Item. This is because list view items are rendered outside the main application - https://github.com/bakerac4/glimmer-native/blob/master/src/dom/native/RadListViewElement.ts#L34
-
if
helpers don't run on manual re-render. I think this has to do with list items being rendered outside of the main application as well. -
Other flavors of View Layer + Nativescript (vue, angular etc) allow for a template to be specified inline. For Example, in angular -
<RadListView [items]="dataItems">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<Label class="nameLabel" [text]="item.name"></Label>
<Label class="descriptionLabel" [text]="item.description"></Label>
</StackLayout>
</ng-template>
</RadListView>
Right now, Glimmer Native requires an actual component to be created so we can render it.
Along with specifying a template inline, I think it would be beneficial to give the user the option to user a real component. Currently this is how we do things, but there are downsides I haven't been able to solve.
- Currently need a wrapping template - which ties into #25
- Need ability to pass in actions and properties from the page doing the rendering to the ListViewItem component.
ListView duplicating items as it recycles views/scrolls
It appears that there is a bug in <ListView>
where if you have a list of items that extends beyond the visible viewport, as you scroll down, the newly rendered items at the bottom of the list will just be duplicates of items at the top of the list, instead of the next actual items in the backing items array. E.g. :
//For a backing array of:
//['Item A', 'Item B', 'Item C', 'Item D', 'Item E']
<ListView>
<Item>Item A</Item>
<Item>Item B</Item>
<Item>Item C</Item>
{{!-- below viewport --}}
<Item>Item A</Item>
<Item>Item B</Item>
...
</ListView>
(pseudo code representation to illustrate whats happening)
Navigation roadmap
Hi there! I haven't had a chance to check it out, but this repo looks very exciting!
I maintain an Ember/Cordova app with some complicated navigational patterns, and lately I've been trying to port React Navigation's API to something that I can use in Ember, but I'm building it in such a way to be framework-agnostic, and I think it'd be pretty easy to get working with glimmer-native. Would that be of interest to you? I haven't delved too deeply but it looks like that navigational aspects are still pretty basic, though I don't have a sense for what (if anything) NativeScript provides as a navigational solution.
If block doesn't render correctly after value changed
Fixed by #5
Render Component needs wrapper
When rendering a component, currently we need a wrapper template to be rendered which contains the component we actually want to render.
It seems that without the wrapper template, a new class instance of the actual component we want to render is not created. Therefore all functions and properties are undefined i.e {{this.onClick}}
is undefined.
Here is an example of a wrapper template in use
- https://github.com/bakerac4/glimmer-native/blob/master/index.ts#L82
however that not without it downsides. It means that the user has to know that the properties he passes in to thenavigate
method will be accessable using@model.{property}
instead of just@property
in the case of navigation.
This poses a larger issue however when working with ListViews. Currently you need to pass in a wrapper template, which means you basically need to pass in any arguments as a pass through to your actual component you would like to render.
For example, Right now to use a ListView you do this
<RadListView
row="7"
colSpan="2"
loadOnDemandBufferSize="16"
loadOnDemandMode={{this.loadMode}}
selectionBehavior="Press"
@items={{this.posts}}
{{on "loadMoreDataRequested" this.loadMore}}
{{on "loaded" this.listViewLoaded}}
{{on "itemSelected" this.viewPost}}
{{set "listViewLayout" this.layout true}}
>
<Template @src={{this.listViewTemplate}} @itemClicked={{this.itemClicked}}/>
</RadListView>
where listViewTemplateSource
would be something like
listViewTemplate = `<HomeFeedListItem
@item={{this.item}}
@itemClicked={{this.itemClicked}} />`;
and then Glimmer Native takes the value passed into the template for this.itemClicked
and send sit in to the listViewTemplate
when we render.
I'd like to find a way to remove the wrapper component but still have a new instance of the class component be created.
Glimmer Native 2.0 ?
![image](https://private-user-images.githubusercontent.com/1360552/297062411-a07e3cc4-ddb4-43e6-ae5f-ee2e0e70c890.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMzA4MDUsIm5iZiI6MTcyMTEzMDUwNSwicGF0aCI6Ii8xMzYwNTUyLzI5NzA2MjQxMS1hMDdlM2NjNC1kZGI0LTQzZTYtYWU1Zi1lZTJlMGU3MGM4OTAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTZUMTE0ODI1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWU1NDE2M2FhYmE3Zjk5NWUxNmY3NzY2ZTkxOTIzMGM5YTMwMzUwZjQ1NjFiNjFkMzY3ZWZmZTdmMGExYjVkYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.teVXdTHikv1e7vFkyorDe30vyml4Uy5zcG5fRjKz-uY)
I able to get https://github.com/lifeart/glimmer-next running in https://openwebf.com/
Road to 1.0
This issue is to track planning and task delegation to get to 1.0
Items that need to be completed
- Demo App
- Site Documentation
- Build system (SASS)
- Build system (Glimmer Compatible addons)
- Finish adding the rest of the default nativescript components
- Add ability to use nativescript plugin
- Implement tests
Stretch goals
- Native Router w/outlets (Like Angulars)
TextField needed
Am I correct in seeing that TextField has not yet been implemented? I don't see it in the list in the readme, and if I try to use <TextField />
I get the error:
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Right side of assignment cannot be destructured
at
1 lookupComponent@file:///app/vendor.js:29891:20
nativescript-windows-android issue
An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
Error calling module function
Error calling module function
Error: Cannot find module './undefined/component.ts'
File: "file:///data/data/org.nativescript.demo/files/app/bundle.js, line: 21, column: 2
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
Error: Cannot find module './undefined/component.ts'
File: ", line: 1, column: 265
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
Error: Cannot find module './undefined/component.ts'
File: ", line: 1, column: 265
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5406)
at android.app.ActivityThread.-wrap2(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: com.tns.NativeScriptException:
Error calling module function
Error calling module function
Error: Cannot find module './undefined/component.ts'
File: "file:///data/data/org.nativescript.demo/files/app/bundle.js, line: 21, column: 2
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
Error: Cannot find module './undefined/component.ts'
File: ", line: 1, column: 265
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
Error: Cannot find module './undefined/component.ts'
File: ", line: 1, column: 265
StackTrace:
Frame: function:'webpackContextResolve', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 19, column: 11
Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 13, column: 11
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 156, column: 113
Frame: function:'addComponents', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 154, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 161, column: 1
Frame: function:'./app.ts', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 175, column: 30
Frame: function:'webpack_require', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 75, column: 30
Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 44, column: 23
Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.demo/files/app/runtime.js', line: 31, column: 19
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/bundle.js', line: 2, column: 57
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/starter.js', line: 3, column: 1
Frame: function:'require', file:'', line: 1, column: 266
at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:624)
at com.tns.Runtime.run(Runtime.java:616)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403)
... 8 more
RadListView item template nodes duplicated when rendering null values
In a simple vertical linear list view layout, it appears that the item templates for a RadListView will incorrectly render duplicate values/view nodes across multiple items in the list, if the node is given a null
value.
For example, if the item template contains the following:
<Label text={{@item.name}} />
Where some of the members in the backing data list contain null
for @item.name
, those particular items are rendering a non-null value from another member in the list. This seems to happen due to that <Label>
node being recycled incorrectly.
However, if you modify the template to the following:
<Label text={{if @item.name @item.name ""}} />
So that null/empty values instead pass an empty string to the <Label>
, the issue does not occur.
Issues with Nativescript HMR and how we load components/templates
We have noticed that while using it, HMR doesn't work on hbs files and HMR inconsistently works on backing component TS Files.
Ember compatibility?
This is a super exciting project - thanks for the great work @bakerac4!
Just wondering what the plans are (if any) around Ember integration (i.e. ember-native). Would this project be a stepping stone in that direction?
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.