Discuss how to support template composition?

[OSpoon]

I have categorized the existing templates into the following array. If we need to have corresponding sample templates for different variants of each Framework, then we need to create 4*4*3=48 different templates.

If we want to add more variants or samples in the future to enrich the built-in templates, it will still be a troublesome task.

I fell into deep thought ~ 😴

const FRAMEWORKS: Framework[] = [
  {
    name: 'vanilla',
    display: 'Vanilla',
    variants: [
      {
        name: 'vanilla',
        display: 'JavaScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vanilla-tailwind',
        display: 'JavaScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vanilla-ts',
        display: 'TypeScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vanilla-ts-tailwind',
        display: 'TypeScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      }
    ]
  },
  {
    name: 'react',
    display: 'React',
    variants: [
      {
        name: 'react',
        display: 'JavaScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'react-tailwind',
        display: 'JavaScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'react-ts',
        display: 'TypeScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'react-ts-tailwind',
        display: 'TypeScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      }
    ]
  },
  {
    name: 'vue',
    display: 'Vue',
    variants: [
      {
        name: 'vue',
        display: 'JavaScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vue-tailwind',
        display: 'JavaScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vue-ts',
        display: 'TypeScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'vue-ts-tailwind',
        display: 'TypeScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      }
    ]
  },
  {
    name: 'preact',
    display: 'Preact',
    variants: [
      {
        name: 'preact',
        display: 'JavaScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'preact-tailwind',
        display: 'JavaScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'preact-ts',
        display: 'TypeScript',
        samples: ['newtab', 'content', 'side_panel']
      },
      {
        name: 'preact-ts-tailwind',
        display: 'TypeScript + TailwindCSS',
        samples: ['newtab', 'content', 'side_panel']
      }
    ]
  }
]

[OSpoon]

I plan to make some attempts in the dev branch of the create-extension project.

[cezaraugusto]

Hey there! Good one to discuss! Here's what I'm planning:

The Tech

We plan to support a total of 4 UI contexts (see below) across 6 different frameworks which should default to TypeScript and use local CSS. They will all have one differentiator library (Tailwind). We will also have the basic JS templates according to the UI contexts (more below).

UI Contexts (5)

So, if we consider only the parts of an extension where we can add HTML/CSS/JS, we end up with 7 contexts. The "options" and the "sandbox" options seem too specific, so let's narrow down to 5:

• Action (popup) pages
• Content Scripts
• Devtools
• Page overrides (newtab/history/bookmarks)
• Sidebars: side panel (for Chromium) / Sidebar action (for Firefox)
• Options pages
• Sandbox pages

Frameworks (3)

Our templates are guided by JS framework. We plan to cover up to 6 (we're currently at 3):

• React
• Vue
• Preact
• Angular
• Svelte
• Solid

Technologies (2)

We have 3 technologies involved. We will have a template for each UI feature to handle "esnext", default all framework-specific code to TypeScript, and in the future support the same templates we do for "esnext" for WASM as well.

• ESNext: edit/create existing templates
• TypeScript: update all framework-specific templates/create new ones
• WASM: future, use the same templates as ESNext but with a WASM example

Libraries (1)

We currently support two unrelated libraries. We will refactor th ChatGPT one to TypeScript and reuse the Tailwind template as a factory for other templates, which will then be removed.

• ChatGPT: refactor to TS
• Tailwind: use as differentiator across templates. eventually delete

The plan

1. Aside from existing JS extensions ("init", "content", "new"), and the upcoming "popup" and "sidebar", all extensions are TypeScript-based.
2. Each of the 6 frameworks will support the 4 different UI Contexts, i.e. "react-popup", "vue-devtools", "preact-sidebar", etc.
3. All examples will default to a local copy of sakura.css.
4. All of the 6 frameworks will have a Tailwind differentiator "react-popup-tailwind", "vue-devtools-tailwind", etc.

The template composition idea is to have a way for developers to run for example --template=react,devtools,tailwind which the create program would then sort so it becomes --template=[framework]-[ui-context]-[helper-library] (translates to --template=react-devtools-tailwind).

Templates Needed

Framework	UI Context	Tailwind	Template Name	Implemented
None (JS)	None (Init)	No	init	✅
None (JS)	Popup	No	popup	⬜️
None (JS)	Newtab	No	newtab	✅
None (JS)	Devtools	No	devtools	⬜️
None (JS)	Sidebar	No	sidebar	⬜️
None (JS)	Content Scripts	No	content	✅
React	Popup	No	react-popup	⬜️
React	Newtab	No	react-newtab (currenrly as "react")	✅
React	Devtools	No	react-devtools	⬜️
React	Sidebar	No	react-sidebar	⬜️
React	Content Scripts	No	react-content (currenrly as "react-typescript")	✅
React	Popup	Yes	react-popup-tailwind	⬜️
React	Newtab	Yes	react-newtab-tailwind	⬜️
React	Devtools	Yes	react-devtools-tailwind	⬜️
React	Sidebar	Yes	react-sidebar-tailwind	⬜️
React	Content Scripts	Yes	react-content-tailwind (currenrly as "tailwind")	✅
Vue	Popup	No	vue-popup	⬜️
Vue	Newtab	No	vue-newtab (currenrly as "vue")	✅
Vue	Devtools	No	vue-devtools	⬜️
Vue	Sidebar	No	vue-sidebar	⬜️
Vue	Content Scripts	No	vue-content	⬜️
Vue	Popup	Yes	vue-popup-tailwind	⬜️
Vue	Newtab	Yes	vue-newtab-tailwind	⬜️
Vue	Devtools	Yes	vue-devtools-tailwind	⬜️
Vue	Sidebar	Yes	vue-sidebar-tailwind	⬜️
Vue	Content Scripts	Yes	vue-content-tailwind (currenrly as "vue-typescript")	✅
Preact	Popup	No	preact-popup	⬜️
Preact	Newtab	No	preact-newtab (currenrly as "preact")	✅
Preact	Devtools	No	preact-devtools	⬜️
Preact	Sidebar	No	preact-sidebar	⬜️
Preact	Content Scripts	No	preact-content	⬜️
Preact	Popup	Yes	preact-popup-tailwind	⬜️
Preact	Newtab	Yes	preact-newtab-tailwind	⬜️
Preact	Devtools	Yes	preact-devtools-tailwind	⬜️
Preact	Sidebar	Yes	preact-sidebar-tailwind	⬜️
Preact	Content Scripts	Yes	preact-content-tailwind (currenrly as "preact-typescript")	✅

Total templates needed: 10/36

Tasks

1. Aside from "init", "content", "new", refactor all existing JS templates to TS
2. Rename the template "new" to "newtab"
3. Implement the templates gradually.

Future

As templates mature, I'd like to have a copy of the "vanilla JS" templates (except for "init") and have a sample WASM file in it to compose the "WASM" templates. And that would finish our built-in template capability. I also think that the Tailwind template while beautiful is too verbose.

What do you think of that? Curious to hear your thoughts on this!

[OSpoon]

I indeed rarely use Tailwind, but many people like it. It's hard to judge.

Are you considering replacing programs/create/templates with templates?

[cezaraugusto]

do you think it's better to provide tailwindcss-specific templates instead? what do you usually use for CSS?

[cezaraugusto]

extracted from https://github.com/extension-js/extension.js/blob/main/programs/cli/spec/fixtures/constants.ts#L9-L16, this is the current interface for templates:

type UIContext = 'sidebar' | 'newTab' | 'content' | 'popup' | 'devTools'
type ConfigFiles =
  | 'postcss.config.js'
  | 'tailwind.config.js'
  | 'tsconfig.json'
  | 'babel.config.js'
  | 'stylelint.config.js'

interface Template {
  name: string
  uiContext: UIContext[] | undefined
  uiFramework: 'react' | 'preact' | 'vue' | undefined
  hasBackground: boolean
  hasEnv: boolean
  configFiles: ConfigFiles[] | undefined
}

The goal is to mix these values to generate default templates based on UI choices, so the framework and the context of the extension would dictate most of what it will do. I'm ok having Tailwind templates split from the "default" options.

[cezaraugusto]

Regarding templates: yes! goal is to have an isolated repository where we can pull templates using the published Extension.js module. By the way, feel free to make edits in there. After #109 they are outdated

[OSpoon]

Templates Needed: The content of the table may have errors.

tailwind -> react-newtab-tailwind
react-typescript -> react-content-tailwind