Add template for tsconfig.json

[portdeveloper]

Description

Added a template for tsconfig.json file to the project templates.

Changes

• Added tsconfig.json template file, removed tsconfig.json

Testing

• Tested template generation with new project creation

To-Do

• Update TEMPLATE examples with the new tsconfig file

[technophile-04]

Hey port can you share the repo(extension) where you have the .args.mjs?

[rin-st]

Could you please take a look at this table? We added it recently. Looks like you can use a raw object instead of a stringified and maybe simplify some logic

[portdeveloper]

Hey thanks for the comments, and I somehow did not receive a notif about Shiv's comment.

So here is the repo:
https://github.com/portdeveloper/test-tsconfig-ext

Maybe we should remove include, exclude and paths and keep the other two?
I tried using stringify but that made the process so complicated :/

lol this was difficult, lmk if i did anything wrong here

[rin-st]

So here is the repo:
https://github.com/portdeveloper/test-tsconfig-ext

Update it please, params of extension are different from this pr

I tried using stringify but that made the process so complicated

Thinking without checking, but I think this should work

`${stringify({
  "compilerOptions": {
    ...
    "plugins": [
      {
        name: "next"
      },
      ...extraPlugins[0]
    ],
    ...extraCompilerOptions[0]
  },
  ...
  })}`

where extraPlugins is array of plugins and extraCompilerOptions is an object with extra options. Default values is empty array and empty object respectively

[portdeveloper]

Thanks! Could you please check again to see if i got it right? @rin-st

I have also updated the example args file

[rin-st]

Thanks @portdeveloper ! Added some comments.

Also, you can test resulting template for example with this defaults

export default withDefaults(contents, {
  extraPlugins: [{name: "next-abcd"}],
  extraCompilerOptions: {abc: "def"}
})

[rin-st]

Lgtm! But don't merge it for now, let's wait also Shiv or Carlos

[technophile-04]

Umm @portdeveloper I think you forgot to update https://github.com/portdeveloper/test-tsconfig-ext/blob/main/extension/packages/nextjs/tsconfig.json.args.mjs ?

I am just trying to understand what extra tsConfig things we need and maybe we can set them as default in main SE-2 (for eg last time we switched "moduleResolution": "Bundler" by default in SE-2 for better working with all extensions)

Also I think you are working on pwa extension right, so maybe can you add all the required .template.mjs in this PR itself?

[portdeveloper]

@technophile-04
We need this for serwist to work!

And there doesn't seem to be anything an extension-builder can add besides more plugins and more compiler options?

I have updated https://github.com/portdeveloper/test-tsconfig-ext/blob/main/extension/packages/nextjs/tsconfig.json.args.mjs too

[technophile-04]

And there doesn't seem to be anything an extension-builder can add besides more plugins and more compiler options?

yeah true lol there not other options to add, also for pwa do you need any other more template file like manfiest.json or it was just this file?

[portdeveloper]

@technophile-04

We also need these:

• manifest.json template file PR
• getMetadata template file PR
• Change the nextjs template so that we can put things outside of the nextConfig object as in the code below:
  https://github.com/portdeveloper/scaffold-pwa/blob/main/packages/nextjs/next.config.mjs

Should I get the manifest.json and getMetadata in this PR as well?

[technophile-04]

Should I get the manifest.json and getMetadata in this PR as well?

Yes could you do that please?

Regarding this :

Change the nextjs template so that we can put things outside of the nextConfig object as in the code below:
https://github.com/portdeveloper/scaffold-pwa/blob/main/packages/nextjs/next.config.mjs

I think we need to update main SE-2 repo with next.config.js => next.config.mjs then we make the PR here to add templatise that file

Thanks @portdeveloper!!

[portdeveloper]

I think we need to update main SE-2 repo with next.config.js => next.config.mjs then we make the PR here to add templatise that file

Sorry for the continued confusion on this.

I think that won't be necessary! Because I am using the next.config.js version in this template!

Let me quickly update that as well.

https://serwist.pages.dev/docs/next/getting-started

[technophile-04]

Oh I got it wrong then sorry : P

The latest nextjs uses a next.config.ts.

I wonder if that's also an option for us as well?

[technophile-04]

The latest nextjs uses a next.config.ts.

I wonder if that's also an option for us as well?

Ohh I see! I think last time I tried using .ts in SE-2 and it gave me weird error but might be fixed and we should use .ts if it works now 🙌 Lets tinker on SE-2 main repo

PS: I am replying to my own comment because Port replied to og comment by editing it 🤣

[portdeveloper]

The latest nextjs uses a next.config.ts.

I wonder if that's also an option for us as well?

Ohh I see! I think last time I tried using .ts in SE-2 and it gave me weird error but might be fixed and we should use .ts if it works now 🙌 Lets tinker on SE-2 main repo

PS: I am replying to my own comment because Port replied to og comment by editing it 🤣

I am never gonna work under the sun again :(((((( i was like why does it say technophile there this should be a bug lmaooo

[portdeveloper]

Hey just added a commit for the manifest.json file, and hopefully I am not editing anyone's message hehe.

args.mjs i used to test things:
https://github.com/portdeveloper/manifest-test/blob/master/extension/packages/nextjs/public/manifest.json.args.mjs

Had to make iconPath optional as that is not needed in the pwa template.

[portdeveloper]

Honestly, I don't understand how to templatize getMetadata.ts and how to use stringify. I am so confused lol
I did it in a way but most probably not in a good way:
please correct me if it's wrong

[technophile-04]

If extension developer doesn't pass the iconPath it will default to "logo.svg" right? So we don't need this check?

[portdeveloper]

I think instead of icon, we are gonna have icons, like the example below:
https://github.com/serwist/serwist/blob/main/examples/next-web-push/public/manifest.json
So, we don't need the icon if the dev does not provide it.

[technophile-04]

don't understand how to templatize getMetadata.ts

I think we can wrap this whole object inside the${stringify({...})} then inside you can extraMetadata ?

[portdeveloper]

Forgive me if i get this wrong but then it cannot read baseUrl (If we stringify the return)