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