Structure ideas

[Benny739]

• apps

  • angular-notitap
  • react-notitap <- Tiptap.tsx goes here
  • vue-notitap

• libs

  • tiptap

    • extensions

      • media-resize (if framework specific nodes, 1 library per framework)

        • angular -> These can be publishable libraries
        • vue
        • react
        • core -> Framework agnostic part goes here, framework specific libs import agnostic code
          • e.g. import from react library:
          • import { mediaResize } from '@notitap/tiptap/extensions/media-resize/core

      • traling-nodes -> if framework agnostic no subfolders / libs

    • ui

      • menus
        • slash-menu
          • angular
          • vue
          • react
          • core

    • utils

  • shared

    • util

tags: framework: angular,vue,react,shared

Example rules to prevent wrong imports:

{
  "sourceTag": "framework:angular",
  "onlyDependOnLibsWithTags": [
    "framework:angular",
    "framework:shared",
  ]
},
{
  "sourceTag": "framework:react",
  "onlyDependOnLibsWithTags": [
    "framework:react",
    "framework:shared",
  ]
},

Example commands to create different libraries
nx g @nrwl/workspace:library media-resize --directory tiptap/extensions/shared --tags framework:shared
https://nx.dev/packages/workspace/generators/library
nx g @nrwl/react:library media-resize --directory tiptap/extensions/shared --tags framework:react
https://nx.dev/packages/react/generators/library
nx g @nrwl/angular:library media-resize --directory tiptap/extensions/shared --tags framework:react

Ressources:

• https://blog.nrwl.io/building-angular-and-react-applications-together-with-nx-78b5578de598

[sereneinserenade]

@Benny739 To me this seems perfect, looks like you're created a solid structure. I'd say let's move forward with this. ⚡