Simplify API

[BryceRussell]

Simplify API

Shorten module names

Currently modules names are prefixed with virtual:

virtual:my-theme/context
virtual:my-theme/config
virtual:my-theme/css
virtual:my-theme/components
virtual:my-theme/assets

But, this could be simplified to:

my-theme:context
my-theme:config
my-theme:css
my-theme:components
my-theme:assets

Flatten exports

Currently there is an exports option for configuring virtual modules

// Author
ThemeProvider({
	name: 'my-theme',
	configSchema: z.object({ ... }),
	entryPoints: { ... },
	exports: {
		css: [ ... ],
		components: { ... },
		assets: { ... },
	}
})

// User
ThemeProvider({
	config: { ... },
	exports: {
		css: [ ... ],
		components: { ... },
		assets: { ... },
	}
})

But, this could be simplified to:

// Author
ThemeProvider({
	name: 'my-theme',
	configSchema: z.object({ ... }),
	entryPoints: { ... },
	css: [ ... ],
	components: { ... },
	assets: { ... },
})

// User
ThemeProvider({
	config: { ... },
	css: [ ... ],
	components: { ... },
	assets: { ... },
})

Cons

• One benefit of keeping the exports object is that modules could be created dynamically by the author instead of being hardcoded

   ThemeProvider({
   	name: 'my-theme',
   	configSchema: z.object({ ... }),
   	entryPoints: { ... },
   	exports: {
   		custom: { ... },
   	}
   })

Multiple Integrations

Currently, when creating a theme that includes other integrations it can be confusing:

import type { AstroIntegration } from 'astro';
import ThemeProvider from 'astro-theme-provider';
import mdx from '@astrojs/mdx';

const MyThemeIntegration = ThemeProvider({
	// ...
})

export default function MyTheme(opts: Parameters<typeof MyThemeIntegration>[0]) : AstroIntegration[] {
  return [
    MyThemeIntegration(opts),
    mdx()
  ]
}

But this could be simplified to:

import ThemeProvider from 'astro-theme-provider';
import mdx from '@astrojs/mdx';

export default ThemeProvider(
	{
		// Theme provider options...
	},
	mdx()
)

[BryceRussell]

6 months later...

Shorten module names

Module are now created dynamically and use the name of the package and module to create an import name, for example:

import "my-theme/css";
import { ... } from "my-theme/assets";
import { ... } from "my-theme/layouts";
import { ... } from "my-theme/components";

Flatten exports

Now named imports, previously named exports

I chose to not flatten this option and to instead allow theme imports to be created dynamically using a glob, an array of imports, or an object of exports.

Simplified example of default imports for themes:

imports: {
  css: "**.css",
  assets: "**.{png,jpg}",
  layouts: "**.astro",
  components: "**.astro"
}

Creates:

import "my-theme/css";
import { ... } from "my-theme/assets";
import { ... } from "my-theme/layouts";
import { ... } from "my-theme/components";

Multiple Integrations

This has not been addressed yet, but there is an issue open for it, hopefully soon!