Add example for firestore considering V9

[mozzipa]

🗄️ Docs report

Description

While there is example for blog, it is not sufficient to be considered for various use cases.

Considering Angular's relation, several guide for firebase will be helpful various developers. Especially novice as like me.

I have tried to implement custom plugin for firestore as below snippet. But it is not able to expect what needs to be corrected.
My representative references were below.
https://github.com/jorgeucano/started-scully-firebase
https://scully.io/docs/learn/getting-started/manualInstallation/
https://github.com/scullyio/scully/blob/main/scully/plugins/sampleFromTS.ts

🔬 Minimal Reproduction

What's the affected URL?**

https://scully.io/docs/learn/create-a-blog/generate-new-blog-posts/
https://scully.io/docs/Reference/plugins/overview/

Expected vs Actual Behavior**

📷Screenshot

🔥 Exception or Error

// scully.{{my project name}}.config.ts

import { ScullyConfig } from '@scullyio/scully';
import '@scullyio/scully-plugin-puppeteer';
import { firestorePlugin } from "./scully/plugins/plugins"

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'cloudrun-angular',
  outDir: './dist/static',
  routes: {
    '/article/:docId': {
      type: 'firebasePlugin',
      manualIdleCheck: true
    },
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: "./blog"
      }
    },},
};

// ./scully/plugins/plugins.ts

import { registerPlugin } from "@scullyio/scully";
import { collection, getDocs, getFirestore, query, where } from "@angular/fire/firestore"; 
import { getApp } from "@angular/fire/app";


const app = getApp()
const firestore = getFirestore()
const dbPath = `/dev_CommunityBoard`
const fsCollection=collection(firestore,dbPath)
const fsQuery=query(
    fsCollection,
    where('published',"==",true),)

export const firestorePlugin = "firestorePlugin";

async function firestorePluginFunction(route: any, config: any){
    let docs = new Array;
    const querySanp = await getDocs(fsQuery);
    querySanp.forEach((doc) => {
        docs.push({ route: `/article/${doc.id}` });
    });
    return docs;
}

const validator = async () => [];
registerPlugin(
    'router',
    firestorePlugin,
    firestorePluginFunction,
    validator);

npx scully && npx scully serve


  ✔ Folder "./scully" used for custom plugins
  x Unknown type "firebasePlugin" in route "/article/:docId"
  ✔ Starting servers for project "cloudrun-angular"
  ✔ Started Scully static server on "http://localhost:1668/"
  ✔ Started Angular distribution server on "http://localhost:1864/" 

🌍 Your Environment

Angular CLI: 15.1.4
Node: 18.13.0
Package Manager: npm 8.19.3
OS: darwin x64

Angular: 15.1.3
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1501.4
@angular-devkit/build-angular 15.1.4
@angular-devkit/core 15.1.4
@angular-devkit/schematics 15.1.4
@angular/cli 15.1.4
@angular/fire 7.5.0
@schematics/angular 15.1.4
rxjs 7.5.7
typescript 4.8.4
"@scullyio/init": "^2.1.41",
"@scullyio/ng-lib": "^2.1.0",
"@scullyio/scully": "^2.1.0",
"@scullyio/scully-plugin-puppeteer": "^2.1.0",

[mozzipa]

Regarding above, below error appears after revision of scully.{{my project name}}.config.ts.
'firestorePlugin' -> firestorePlugin

Error [ERR_REQUIRE_ESM]: require() of ES Module /~~~/node_modules/@angular/core/fesm2015/core.mjs not supported. Instead change the require of /~~~/node_modules/@angular/core/fesm2015/core.mjs to a dynamic import() which is available in all CommonJS modules.

[fjmoeller]

howdy! I have the same exact problem with ERR_REQUIRE_ESM, have you found a fix for it ?

[mozzipa]

howdy! I have the same exact problem with ERR_REQUIRE_ESM, have you found a fix for it ?

No.. I moved Angular + NestJS.