NativeScript-Vue 3.0 Design Doc

[rigor789]

NativeScript-Vue Next

Project structure: monorepo using Yarn Workspaces.

• @nativescript-vue/compiler - template compiler based off of @vue/compiler-dom
• @nativescript-vue/runtime - runtime based off of @vue/runtime-dom
• nativescript-vue - package to house both compiler + runtime

         + ------------> ( @nativescript-vue/compiler )
         |
         +
( nativescript-vue )
         +
         |
         + ------------> ( @nativescript-vue/runtime )

Tooling to adopt:

• TypeScript
• Jest
• Yarn Workspaces

Todos:

• [ ] runtime
  • [x] registry
  • [x] clean up built-in element registration
  • [x] figure out a clean way to allow mocking for testing
  • [x] nodeOps
  • [x] insert
  • [x] remove
  • [x] setText
  • [x] setElementText (Seems to be used by Portals but not sure what's the difference from setText?)
  • [x] parentNode
  • [ ] nextSibling (refactor to use children.indexof + 1)
  • [x] setScopeId
  • [x] patchProp. See #5
• [ ] compiler. See #14
• [x] nativescript-vue
  • [x] todo...
• [ ] runtime components
  • [ ] Transition
  • [ ] TransitionGroup
  • [ ] ListView
  • [ ] v-template
  • [x] ActionBar
  • [ ] android/ios
  • [ ] others if needed (frame, page, tabs)
• [x] runtime directives
  • [x] vModel
  • ~[ ] vOn~
  • [x] vShow
• [ ] runtime plugins/extensions
  • [ ] modals
  • [ ] navigation

[rigor789]

Idea: Let's implement wix/Detox tests for the built-in elements, where we automatically test they are working as intended. For example, the simplest ones would be:

• Label
  • it displays text passed into the text property
  • it displays text passed as a direct child
  • it displays dynamically bound text in both versions above
  • FormattedString
    • it renders Span's
    • it displays dynamically bound spans in both syntaxes

There may be overlaps with things like Buttons, as they pretty much have the same tests as a Label, but that just makes our job easier.

I am thinking of making these into a custom .vue file that has the usual <template> <script> and an extra <tests> (or whatever makes sense for editors to propery highlight).

These would then be built by webpack into an app + a test suite dynamically.

Sample of my idea: https://github.com/rigor789/nativescript-vue-next/blob/master/tests/detox/Label.spec.vue