bakerac4 / glimmer-native Goto Github PK

Given the following template:

<Label 
    text="Foo" 
    class="{{if this.someProp "color-red"}}"
/>

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 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.

Fixed by #5

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/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.

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)

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.

Fixed by #5

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 the navigate 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.

I able to get https://github.com/lifeart/glimmer-next running in https://openwebf.com/

https://github.com/lifeart/gxt-native

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)

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

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

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.

We have noticed that while using it, HMR doesn't work on hbs files and HMR inconsistently works on backing component TS Files.

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?