RFC: Explore Nuxt like module/plugin support

This issue has been tracked since 2023-02-22.

Which scope/s are relevant/related to the feature request?

Don't known / other

Information

Overview

Nuxt has an awesome way to provide support for Modules.
External modules or plugins can be written to extend the default Nuxt functionality.

I think supporting this for Analog would take this project to the next level.

Since Nuxt is also based on Nitro and Vite I think taking a look at how it is implemented there can be helpful.
To understand how Modules work for the developer we can read this guide here:
https://nuxt.com/docs/guide/going-further/modules

From what I understand so far, under the hood Nuxt uses the following unjs packages to support this functionality:
https://github.com/unjs/unctx
https://github.com/unjs/hookable
https://github.com/unjs/unplugin (this might not even be needed since Analog is Vite only)

The specific use case I have:
I would love to easily support a Prismic or Strapi API for my Analog project so a non technical author can just log in and start creating posts.

Example

I can simply run the following command.

yarn add --dev @analogjs/strapi

Then, add @analogjs/strapi to the [modules] section of our Analog Vite plugin:

...
 plugins: [
      analog({
            modules: ['@analogjs/strapi'],
            strapi: {
              // Options
            },
          ...
     })
]
...

And to the main.ts bootstraping logic.

bootstrapApplication(AppComponent, {
  providers: [
    provideAnalogStrapi(),
  ],
}).catch((err) => console.error(err));

And be able to use it in a component like so:

@Component({
  selector: 'blog',
  standalone: true,
  imports: [AsyncPipe],
  template: `
      <!-- do something with the data returned here -->
       {{ blogArticle$ | async }}
  `,
})
export default class BlogComponent {
  private _slug = inject(ActivatedRoute).snapshot.paramMap.get('slug')
  public blogArticle$ = injectStrapi().find('blogArticle', this._slug)
}

## Closing thoughts
Of course this needs a lot of consideration and we need to explore if this is even possible with Angular.
But I thought I would create this issue to start a discussion and get people's input, 
because I believe the potential upside that could come from this is very big.

### Describe any alternatives/workarounds you're currently using

Currently not possible

### I would be willing to submit a PR to fix this issue

- [X] Yes
- [ ] No
More Details About Repo
Owner Name analogjs
Repo Name analog
Full Name analogjs/analog
Language TypeScript
Created Date 2022-07-06
Updated Date 2023-03-28
Star Count 885
Watcher Count 18
Fork Count 67
Issue Count 33

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date