Add template for tsconfig.json + getMetadata.ts + manifest.json #145

portdeveloper · 2024-10-26T04:57:44Z

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

Here is a repo with all the changed file args
https://github.com/portdeveloper/test-everything

To-Do

Update nextjs config template to work with pwa

technophile-04 · 2024-10-26T05:06:58Z

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

rin-st · 2024-10-27T17:01:43Z

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 · 2024-10-27T20:30:54Z

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 · 2024-10-28T14:10:54Z

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 · 2024-10-28T16:57:54Z

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

I have also updated the example args file

templates/base/packages/nextjs/tsconfig.json.template.mjs

rin-st · 2024-10-28T18:34:23Z

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

my-tsconfig-test

pwa

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 · 2024-10-29T14:40:24Z

@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 · 2024-10-31T10:44:58Z

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 · 2024-10-31T13:51:34Z

@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 · 2024-11-01T03:10:03Z

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 · 2024-11-01T04:20:13Z

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 · 2024-11-01T04:33:06Z

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 · 2024-11-01T05:53:39Z

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 · 2024-11-01T09:35:20Z

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 · 2024-11-01T19:05:55Z

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 · 2024-11-01T20:46:23Z

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 · 2024-11-04T14:11:13Z

templates/base/packages/nextjs/public/manifest.json.template.mjs

+const contents = ({ name, description, iconPath, extraContent }) => stringify({
+  name: name[0],
+  description: description[0],
+  ...(iconPath[0] && { iconPath: iconPath[0] }), // Only include iconPath if it's provided


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

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.

Ohh yeah makes sense! So people need to pas export const iconPath = '' to omit that field.

What if people forgot to add export const iconPath = '' but also have icons in their template, will it still work as expected?

https://github.com/portdeveloper/test-everything

yes i tested it with this extension which has all the args mjs files for the changed files in this PR

technophile-04 · 2024-11-04T14:25:53Z

templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs

@@ -14,7 +17,7 @@ export const getMetadata = ({
  description: string;
  imageRelativePath?: string;
 }): Metadata => {
-  const imageUrl = `${baseUrl}${imageRelativePath}`;
+  const imageUrl = \`\${baseUrl}\${imageRelativePath}\`;

  return {


don't understand how to templatize getMetadata.ts

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

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

Ohh yeah makes sense, my bad. Can we have an corresponding args.mjs file for this file?

I don't see it in https://github.com/portdeveloper/manifest-test

export const titleTemplate = "%s | My PWA App" export const extraIcons = { shortcut: "/favicon.ico", apple: [{ url: "/icons/apple-touch-icon.png", sizes: "180x180" }] } export const extraMetadata = { applicationName: 'title', manifest: "/manifest.json", appleWebApp: { capable: true, statusBarStyle: "default", title: 'title' }, formatDetection: { telephone: false } }

https://github.com/portdeveloper/test-everything Here is a repo with all the changed files.

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

If I understand it right you can theoretically do (writing it without trying)

return { metadataBase: new Url(baseUrl), ...${stringify({title: ..., description: ... , openGraph: .., twitter: ..})}, etc

but since that part is always the same I think it's ok that it already stringifyed

If we only partially stringify something, the passed args does not work
e.g.

rin-st · 2024-11-20T20:01:06Z

templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs

@@ -45,6 +48,15 @@ export const getMetadata = ({
    },
    icons: {
      icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
+      ${extraIcons[0] ? Object.entries(extraIcons[0]).map(([key, value]) => `${key}: ${JSON.stringify(value)}`).join(',\n      ') : ''}


have you tried ...${stringify(extraIcons[0]} here?

Does not work since there is no object there, the "..." just gets transferred to the created file

rin-st · 2024-11-20T20:01:50Z

templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs

    },
+    ${extraMetadata[0] ? Object.entries(extraMetadata[0]).map(([key, value]) => `${key}: ${JSON.stringify(value)}`).join(',\n    ') : ''}


same here but with extraMetadata[0]

Gives me weird formatting errors

Add template for tsconfig.json

2783fe3

portdeveloper added 2 commits October 27, 2024 23:34

Remove unnecessary params

7df1a2c

Merge main

944a741

portdeveloper added 2 commits October 28, 2024 18:59

Update the template file to use stringify func

a5c1290

Modify template to work with non-existing args

f158bb8

rin-st reviewed Oct 28, 2024

View reviewed changes

templates/base/packages/nextjs/tsconfig.json.template.mjs Outdated Show resolved Hide resolved

rin-st reviewed Oct 28, 2024

View reviewed changes

templates/base/packages/nextjs/tsconfig.json.template.mjs Outdated Show resolved Hide resolved

rin-st reviewed Oct 28, 2024

View reviewed changes

templates/base/packages/nextjs/tsconfig.json.template.mjs Outdated Show resolved Hide resolved

Fix bad practices

14ddaf4

rin-st approved these changes Oct 28, 2024

View reviewed changes

technophile-04 reviewed Oct 29, 2024

View reviewed changes

my-tsconfig-test Outdated Show resolved Hide resolved

technophile-04 reviewed Oct 29, 2024

View reviewed changes

pwa Outdated Show resolved Hide resolved

technophile-04 reviewed Oct 29, 2024

View reviewed changes

Delete unnecessary files

ec2d358

Add manifest.json template

e8d6227

Add getmetadata template... in a weird way...

0816599

technophile-04 reviewed Nov 4, 2024

View reviewed changes

rin-st reviewed Nov 20, 2024

View reviewed changes

portdeveloper changed the title ~~Add template for tsconfig.json~~ Add template for tsconfig.json + getMetadata.ts + manifest.json Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

portdeveloper commented Oct 26, 2024 •

edited

Loading

technophile-04 commented Oct 26, 2024

rin-st commented Oct 27, 2024 •

edited

Loading

portdeveloper commented Oct 27, 2024 •

edited

Loading

rin-st commented Oct 28, 2024 •

edited

Loading

portdeveloper commented Oct 28, 2024

rin-st commented Oct 28, 2024

rin-st left a comment

technophile-04 left a comment

portdeveloper commented Oct 29, 2024

technophile-04 commented Oct 31, 2024

portdeveloper commented Oct 31, 2024 •

edited

Loading

technophile-04 commented Nov 1, 2024 •

edited

Loading

portdeveloper commented Nov 1, 2024 •

edited

Loading

technophile-04 commented Nov 1, 2024 •

edited by portdeveloper

Loading

technophile-04 commented Nov 1, 2024

portdeveloper commented Nov 1, 2024

portdeveloper commented Nov 1, 2024

portdeveloper commented Nov 1, 2024 •

edited

Loading

technophile-04 Nov 4, 2024

portdeveloper Nov 4, 2024

technophile-04 Nov 20, 2024

portdeveloper Nov 20, 2024

technophile-04 Nov 4, 2024

portdeveloper Nov 4, 2024

technophile-04 Nov 20, 2024

portdeveloper Nov 20, 2024 •

edited

Loading

portdeveloper Nov 20, 2024

rin-st Nov 20, 2024 •

edited

Loading

portdeveloper Nov 21, 2024

rin-st Nov 20, 2024

portdeveloper Nov 21, 2024

rin-st Nov 20, 2024

portdeveloper Nov 21, 2024

		},
		${extraMetadata[0] ? Object.entries(extraMetadata[0]).map(([key, value]) => `${key}: ${JSON.stringify(value)}`).join(',\n ') : ''}

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

Are you sure you want to change the base?

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

Conversation

portdeveloper commented Oct 26, 2024 • edited Loading

Description

Changes

Testing

To-Do

technophile-04 commented Oct 26, 2024

rin-st commented Oct 27, 2024 • edited Loading

portdeveloper commented Oct 27, 2024 • edited Loading

rin-st commented Oct 28, 2024 • edited Loading

portdeveloper commented Oct 28, 2024

rin-st commented Oct 28, 2024

rin-st left a comment

Choose a reason for hiding this comment

technophile-04 left a comment

Choose a reason for hiding this comment

portdeveloper commented Oct 29, 2024

technophile-04 commented Oct 31, 2024

portdeveloper commented Oct 31, 2024 • edited Loading

technophile-04 commented Nov 1, 2024 • edited Loading

portdeveloper commented Nov 1, 2024 • edited Loading

technophile-04 commented Nov 1, 2024 • edited by portdeveloper Loading

technophile-04 commented Nov 1, 2024

portdeveloper commented Nov 1, 2024

portdeveloper commented Nov 1, 2024

portdeveloper commented Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

portdeveloper Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rin-st Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

portdeveloper commented Oct 26, 2024 •

edited

Loading

rin-st commented Oct 27, 2024 •

edited

Loading

portdeveloper commented Oct 27, 2024 •

edited

Loading

rin-st commented Oct 28, 2024 •

edited

Loading

portdeveloper commented Oct 31, 2024 •

edited

Loading

technophile-04 commented Nov 1, 2024 •

edited

Loading

portdeveloper commented Nov 1, 2024 •

edited

Loading

technophile-04 commented Nov 1, 2024 •

edited by portdeveloper

Loading

portdeveloper commented Nov 1, 2024 •

edited

Loading

portdeveloper Nov 20, 2024 •

edited

Loading

rin-st Nov 20, 2024 •

edited

Loading