#3 theme extension base setup

apps/sfy-eu-blocks-app/app/package.json

@@ -6,7 +6,7 @@
 	"scripts": {
 		"build": "remix vite:build",
 		"start": "remix-serve ./build/server/index.js",
-		"start:dev": "shopify app dev --skip-dependencies-installation",
+		"start:dev": "shopify app dev --skip-dependencies-installation --theme-app-extension-port 9294",
 		"shopify": "shopify",
 		"shopify:generate": "shopify app generate",
 		"shopify:deploy": "shopify app deploy",

apps/sfy-eu-blocks-app/app/shopify.app.toml

@@ -1,10 +1,10 @@
 # Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration
 
 client_id = "a7314ae84139f89d0289de296fb9e19a"
-extension_directories = [ ]
+extension_directories = [ "../theme-extension" ]
 name = "eu-blocks"
 handle = "eu-blocks"
-application_url = "https://adjusted-suggesting-lcd-archive.trycloudflare.com"
+application_url = "https://liberal-rate-used-dates.trycloudflare.com"
 embedded = true
 
 [build]
@@ -18,9 +18,9 @@ scopes = "write_products"
 
 [auth]
 redirect_urls = [
-  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/auth/callback",
-  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/auth/shopify/callback",
-  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/api/auth/callback"
+  "https://liberal-rate-used-dates.trycloudflare.com/auth/callback",
+  "https://liberal-rate-used-dates.trycloudflare.com/auth/shopify/callback",
+  "https://liberal-rate-used-dates.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

apps/sfy-eu-blocks-app/theme-extension-elements/.storybook/main.js

@@ -0,0 +1,30 @@
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ *
+ * https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
+ */
+function getAbsolutePath(value) {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-interactions')
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/web-components-vite'),
+		options: {}
+	},
+	docs: {
+		autodocs: 'tag'
+	}
+};
+
+export default config;

apps/sfy-eu-blocks-app/theme-extension-elements/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
+};
+
+export default preview;

apps/sfy-eu-blocks-app/theme-extension-elements/README.md

@@ -0,0 +1 @@
+# `@repo/sfy-eu-blocks-app-extension-elements`

apps/sfy-eu-blocks-app/theme-extension-elements/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@repo/sfy-eu-blocks-app-extension-elements",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "tsc -b && vite build",
+		"start": "vite preview",
+		"start:dev": "vite",
+		"storybook:start": "storybook dev -p 6006",
+		"storybook:build": "storybook build",
+		"lint": "eslint --ext .js,.ts,.jsx,.tsx src/",
+		"clean": "shx rm -rf dist && shx rm -rf node_modules && shx rm -rf .turbo",
+		"install:clean": "pnpm run clean && pnpm install",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"dependencies": {
+		"solid-element": "^1.8.1",
+		"solid-js": "^1.8.21"
+	},
+	"devDependencies": {
+		"@storybook/addon-essentials": "^8.2.9",
+		"@storybook/addon-interactions": "^8.2.9",
+		"@storybook/addon-links": "^8.2.9",
+		"@storybook/blocks": "^8.2.9",
+		"@storybook/test": "^8.2.9",
+		"@storybook/web-components": "^8.2.9",
+		"@storybook/web-components-vite": "^8.2.9",
+		"autoprefixer": "^10.4.20",
+		"daisyui": "^4.12.10",
+		"postcss": "^8.4.41",
+		"storybook": "^8.2.9",
+		"tailwindcss": "^3.4.10",
+		"typescript": "^5.5.4",
+		"vite": "^5.4.2",
+		"vite-plugin-shopify": "^3.0.1",
+		"vite-plugin-solid": "^2.10.2"
+	}
+}

apps/sfy-eu-blocks-app/theme-extension-elements/postcss.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+	plugins: {
+		tailwindcss: {
+			config: './tailwind.config.js'
+		},
+		autoprefixer: {}
+	}
+};

apps/sfy-eu-blocks-app/theme-extension-elements/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/sfy-eu-blocks-app/theme-extension-elements/src/elements/EnergyLabel.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import { EnergyLabelElement } from './EnergyLabel';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
+const meta = {
+	title: 'ui/EnergyLabel',
+	tags: ['autodocs'],
+	render: (args) => new EnergyLabelElement(args)
+} satisfies Meta<typeof EnergyLabelElement>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

apps/sfy-eu-blocks-app/theme-extension-elements/src/elements/EnergyLabel.tsx

@@ -0,0 +1,13 @@
+import { customElement, noShadowDOM } from 'solid-element';
+
+import '../app.css';
+
+export const EnergyLabelElement = customElement(
+	'energy-label-element',
+	{}, // TODO: Figure out what props to pass
+	() => {
+		noShadowDOM();
+
+		return <div>Hello world</div>;
+	}
+);

apps/sfy-eu-blocks-app/theme-extension-elements/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/sfy-eu-blocks-app/theme-extension-elements/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{js,jsx,ts,tsx}'],
+	theme: {
+		extend: {}
+	},
+	plugins: [require('daisyui')]
+};

apps/sfy-eu-blocks-app/theme-extension-elements/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
+}

apps/sfy-eu-blocks-app/theme-extension-elements/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}

apps/sfy-eu-blocks-app/theme-extension-elements/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"noEmit": true
+	},
+	"include": ["vite.config.ts"]
+}

apps/sfy-eu-blocks-app/theme-extension-elements/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import shopify from 'vite-plugin-shopify';
+import solid from 'vite-plugin-solid';
+
+export default defineConfig({
+	build: {
+		minify: true,
+		cssMinify: true,
+		rollupOptions: {
+			output: {
+				manualChunks: {
+					solid: ['solid-js', 'solid-element']
+				}
+			}
+		}
+	},
+	plugins: [
+		shopify({
+			themeRoot: '../theme-extension',
+			// entrypointsDir: "./src",
+			additionalEntrypoints: ['./src/elements/EnergyLabel.tsx'],
+			sourceCodeDir: './src',
+			snippetFile: 'vite-tag.liquid'
+		}),
+		solid()
+	]
+});

apps/sfy-eu-blocks-app/theme-extension/.gitignore

@@ -0,0 +1,3 @@
+assets/**/*.js
+assets/**/*.css
+.vite/

apps/sfy-eu-blocks-app/theme-extension/blocks/energy_label.liquid

@@ -0,0 +1,20 @@
+{% liquid
+	# Relative to entrypointsDir
+	render 'vite-tag' with '/src/elements/EnergyLabel.tsx'
+%}
+
+{% style %}
+	{{ block.settings.custom_css }}
+{% endstyle %}
+
+<energy-label-element
+	default-rating='{{ block.settings.default_rating }}'
+></energy-label-element>
+
+{% schema %}
+{
+	"name": "Energy Label Extension",
+	"target": "section",
+	"settings": []
+}
+{% endschema %}

apps/sfy-eu-blocks-app/theme-extension/locales/en.default.json

@@ -0,0 +1,2 @@
+{
+}

apps/sfy-eu-blocks-app/theme-extension/shopify.extension.toml

@@ -0,0 +1,2 @@
+name = "theme-extension"
+type = "theme"

apps/sfy-eu-blocks-app/theme-extension/snippets/vite-tag.liquid

@@ -0,0 +1,10 @@
+{% comment %}
+  IMPORTANT: This snippet is automatically generated by vite-plugin-shopify.
+  Do not attempt to modify this file directly, as any changes will be overwritten by the next build.
+{% endcomment %}
+{% assign path = vite-tag | replace: '~/', '../' | replace: '@/', '../' %}
+{% if path == "/src/elements/EnergyLabel.tsx" or path == "../elements/EnergyLabel.tsx" %}
+  <script src="{{ 'EnergyLabel-3kwuNF6Y.js' | asset_url | split: '?' | first }}" type="module" crossorigin="anonymous"></script>
+  <link rel="modulepreload" href="{{ 'solid-CKvf5k5P.js' | asset_url | split: '?' | first }}" crossorigin="anonymous">
+  {{ 'EnergyLabel-2GWgx4jR.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
+{% endif %}

apps/sfy-playground-app/app/shopify.app.toml

@@ -4,7 +4,7 @@ client_id = "4fda1d00bc349ec079eecc278cb31fbb"
 extension_directories = [ "../theme-extension", "../admin-block-extension" ]
 name = "monorepo-test"
 handle = "monorepo-test-1"
-application_url = "https://residents-concepts-modify-expanding.trycloudflare.com"
+application_url = "https://tile-thursday-informative-schedules.trycloudflare.com"
 embedded = true
 
 [build]
@@ -18,9 +18,9 @@ scopes = "write_products"
 
 [auth]
 redirect_urls = [
-  "https://residents-concepts-modify-expanding.trycloudflare.com/auth/callback",
-  "https://residents-concepts-modify-expanding.trycloudflare.com/auth/shopify/callback",
-  "https://residents-concepts-modify-expanding.trycloudflare.com/api/auth/callback"
+  "https://tile-thursday-informative-schedules.trycloudflare.com/auth/callback",
+  "https://tile-thursday-informative-schedules.trycloudflare.com/auth/shopify/callback",
+  "https://tile-thursday-informative-schedules.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

apps/sfy-playground-app/theme-extension/locales/en.default.json

@@ -1,10 +1,2 @@
 {
-	"ratings": {
-		"stars": {
-			"label": "Ratings"
-		},
-		"home": {
-			"recommendationText": "Recommended Product!"
-		}
-	}
 }