feat: theme in url (#88)

* fix: do not show empty theme tables

* feat: encode theme in URL

Author: bitpshr

src/App.tsx

@@ -63,7 +63,8 @@ export default factory(function App({ properties, middleware: { block, icache, t
 	const readmeFilenames = getReadmeFileNames(config);
 	const isCodeSandbox = !!global.window.csbJsonP;
 	const changeTheme = (themeName: string) => {
-		const newTheme = config.themes[themeName].theme;
+		const { theme: newTheme, label } = config.themes[themeName];
+		window.location.search = `theme=${label}`;
 		theme.set(newTheme);
 	};
 

src/Example.tsx

@@ -70,8 +70,10 @@ export default factory(function Example({
 
 	const widgetReadme = widgetReadmes[readmePath];
 	const widgetExample = widgetExamples[examplePath];
-	const { properties: widgetProperty, children: widgetChildren, messages, locales } = widgetProperties[widgetName] || {} as any;
+	const { properties: widgetProperty, children: widgetChildren, messages, locales } =
+		widgetProperties[widgetName] || ({} as any);
 	const widgetTheme = widgetThemes[widgetName];
+	const hasThemeKeys = Object.keys(widgetTheme).length > 0;
 
 	const dimensions = postMessage();
 
@@ -122,9 +124,23 @@ export default factory(function Example({
 			{isOverview && widgetChildren && widgetChildren.length && (
 				<InterfaceTable props={widgetChildren} tableName="Children" />
 			)}
-			{isOverview && messages.length && <InterfaceTable props={messages} tableName="i18n Messages" descriptionLabel="Default" showTypes={false}/>}
-			{isOverview && locales.length && <InterfaceTable props={locales} tableName="Supported Locales" showComments={false} showTypes={false}/>}
-			{isOverview && <ThemeTable themes={widgetTheme} />}
+			{isOverview && messages.length && (
+				<InterfaceTable
+					props={messages}
+					tableName="i18n Messages"
+					descriptionLabel="Default"
+					showTypes={false}
+				/>
+			)}
+			{isOverview && locales.length && (
+				<InterfaceTable
+					props={locales}
+					tableName="Supported Locales"
+					showComments={false}
+					showTypes={false}
+				/>
+			)}
+			{isOverview && hasThemeKeys && <ThemeTable themes={widgetTheme} />}
 		</div>
 	);
 });

src/SideMenu.tsx

@@ -1,31 +1,20 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
 import theme from '@dojo/framework/core/middleware/theme';
-import { isThemeInjectorPayloadWithVariant } from '@dojo/framework/core/ThemeInjector';
 
 import ActiveLink from './ActiveLink';
+import { Config } from '.';
+import { getThemeFromConfig } from './utils';
 
 const factory = create({ theme }).properties<{
 	widgetName: string;
-	config: any;
+	config: Config;
 	onThemeChange: (theme: string) => void;
 }>();
 
 export default factory(function SideBar({ properties, middleware: { theme } }) {
 	const { widgetName, config, onThemeChange } = properties();
+	const currentTheme = getThemeFromConfig(config);
 
-	const currentTheme = theme.get();
-	let currentThemeIndex = 0;
-	config.themes.some((theme: any, i: number) => {
-		if (isThemeInjectorPayloadWithVariant(currentTheme)) {
-			if (currentTheme.theme === theme.theme.theme) {
-				currentThemeIndex = i;
-				return true;
-			}
-		} else if (currentTheme === theme.theme) {
-			currentThemeIndex = i;
-			return true;
-		}
-	});
 	return (
 		<div classes="flex flex-col justify-between overflow-y-auto sticky top-16 max-h-(screen-16) pt-12 pb-4 -mt-12">
 			<div classes="mb-8">
@@ -96,7 +85,10 @@ export default factory(function SideBar({ properties, middleware: { theme } }) {
 							>
 								{config.themes.map((theme: any, i: number) => {
 									return (
-										<option selected={i === currentThemeIndex} value={`${i}`}>
+										<option
+											selected={theme.label === currentTheme.label}
+											value={`${i}`}
+										>
 											{theme.label}
 										</option>
 									);

src/index.tsx

@@ -10,6 +10,7 @@ import './main.css';
 
 import routes from './routes';
 import App from './App';
+import { getThemeFromConfig } from './utils';
 
 export interface ConfigThemes {
 	label: string;
@@ -57,8 +58,8 @@ export default ({ config }: { config: Config }) => {
 			}
 		});
 	} else {
+		const theme = getThemeFromConfig(config);
 		const registry = new Registry();
-		const [theme] = themes;
 		registerThemeInjector(theme.theme, registry);
 		registerRouterInjector(routes, registry);
 

src/utils.ts

@@ -0,0 +1,8 @@
+import { Config, ConfigThemes } from '.';
+
+export function getThemeFromConfig(config: Config): ConfigThemes {
+	const { searchParams } = new URL(window.location.href);
+	const themeParam = searchParams.get('theme');
+	const theme = config.themes.find((theme) => theme.label === themeParam) || config.themes[0];
+	return theme;
+}