@shopify/shop-minis-cli 0.0.0-snapshot.20240712123821

package/build/utils/path.d.ts

@@ -0,0 +1 @@
+export declare function getMiniBasePath(): string;

package/build/utils/path.js

@@ -0,0 +1,8 @@
+import path from 'path';
+export function getMiniBasePath() {
+    const basePath = process.cwd();
+    return process.env.CUSTOM_BASE_PATH
+        ? path.join(basePath, process.env.CUSTOM_BASE_PATH)
+        : basePath;
+}
+//# sourceMappingURL=path.js.map

package/build/utils/path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.js","sourceRoot":"","sources":["../../src/utils/path.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,MAAM,UAAU,eAAe;IAC7B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAA;IAC9B,OAAO,OAAO,CAAC,GAAG,CAAC,gBAAgB;QACjC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;QACnD,CAAC,CAAC,QAAQ,CAAA;AACd,CAAC"}

package/build/utils/replace-strings-in-template.d.ts

@@ -0,0 +1 @@
+export declare function replaceStringsInTemplate(dir: string, stringsToReplace: Record<string, string>): Promise<void>;

package/build/utils/replace-strings-in-template.js

@@ -0,0 +1,15 @@
+import replaceInFile from 'replace-in-file';
+export async function replaceStringsInTemplate(dir, stringsToReplace) {
+    for (const [replaceKey, replaceValue] of Object.entries(stringsToReplace)) {
+        const replaceOptions = {
+            files: [`${dir}/**/*.*`],
+            from: new RegExp(replaceKey, 'g'),
+            to: replaceValue,
+            optionsForFiles: {
+                ignore: ['**/node_modules/**'],
+            },
+        };
+        await replaceInFile.replaceInFile(replaceOptions);
+    }
+}
+//# sourceMappingURL=replace-strings-in-template.js.map

package/build/utils/replace-strings-in-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace-strings-in-template.js","sourceRoot":"","sources":["../../src/utils/replace-strings-in-template.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAC5C,GAAW,EACX,gBAAwC;IAExC,KAAK,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;QACzE,MAAM,cAAc,GAAG;YACrB,KAAK,EAAE,CAAC,GAAG,GAAG,SAAS,CAAC;YACxB,IAAI,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC;YACjC,EAAE,EAAE,YAAY;YAChB,eAAe,EAAE;gBACf,MAAM,EAAE,CAAC,oBAAoB,CAAC;aAC/B;SACF,CAAA;QAED,MAAM,aAAa,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;KAClD;AACH,CAAC"}

package/build/utils/semver.d.ts

@@ -0,0 +1 @@
+export declare function validateUpgradeBetweenVersions(fromVersion: string, toVersion: string): void;

package/build/utils/semver.js

@@ -0,0 +1,19 @@
+import { lte, coerce as coerceVersionToSemver } from 'semver';
+import { AbortError } from '@shopify/cli-kit/node/error';
+export function validateUpgradeBetweenVersions(fromVersion, toVersion) {
+    const fromVersionSemver = coerceVersionToSemver(fromVersion);
+    const toVersionSemver = coerceVersionToSemver(toVersion);
+    if (!fromVersionSemver || !toVersionSemver) {
+        const versionWithError = fromVersionSemver ? toVersion : fromVersion;
+        throw new AbortError('The provided version is not a valid semver string', undefined, [
+            [
+                `The specified value was "${versionWithError}"`,
+                `Read more about semantic versioning in https://semver.org/`,
+            ],
+        ]);
+    }
+    if (lte(toVersionSemver, fromVersionSemver)) {
+        throw new AbortError('The provided target version must be bigger than the base version', undefined, [[`Target version is "${toVersion}"`, `Base version is "${fromVersion}"`]]);
+    }
+}
+//# sourceMappingURL=semver.js.map

package/build/utils/semver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semver.js","sourceRoot":"","sources":["../../src/utils/semver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,MAAM,IAAI,qBAAqB,EAAC,MAAM,QAAQ,CAAA;AAC3D,OAAO,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA;AAEtD,MAAM,UAAU,8BAA8B,CAC5C,WAAmB,EACnB,SAAiB;IAEjB,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAA;IAC5D,MAAM,eAAe,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAExD,IAAI,CAAC,iBAAiB,IAAI,CAAC,eAAe,EAAE;QAC1C,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAA;QACpE,MAAM,IAAI,UAAU,CAClB,mDAAmD,EACnD,SAAS,EACT;YACE;gBACE,4BAA4B,gBAAgB,GAAG;gBAC/C,4DAA4D;aAC7D;SACF,CACF,CAAA;KACF;IAED,IAAI,GAAG,CAAC,eAAe,EAAE,iBAAiB,CAAC,EAAE;QAC3C,MAAM,IAAI,UAAU,CAClB,kEAAkE,EAClE,SAAS,EACT,CAAC,CAAC,sBAAsB,SAAS,GAAG,EAAE,oBAAoB,WAAW,GAAG,CAAC,CAAC,CAC3E,CAAA;KACF;AACH,CAAC"}

package/build/utils/wrap-with-loading-indicator.d.ts

@@ -0,0 +1,9 @@
+import { Options as OraOptions } from 'ora';
+interface LoadingOptions {
+    loadingMessage: string;
+    successMessage?: string;
+    errorMessage?: string;
+    spinnerOptions?: Omit<OraOptions, 'text' | 'prefixText'>;
+}
+export declare function wrapWithLoadingIndicator<T>(promise: Promise<T>, { loadingMessage, errorMessage, successMessage, spinnerOptions }: LoadingOptions): Promise<T>;
+export {};

package/build/utils/wrap-with-loading-indicator.js

@@ -0,0 +1,16 @@
+import ora from 'ora';
+export async function wrapWithLoadingIndicator(promise, { loadingMessage, errorMessage, successMessage, spinnerOptions }) {
+    const loadingIndicator = ora(spinnerOptions);
+    loadingIndicator.start(loadingMessage);
+    try {
+        const result = await promise;
+        loadingIndicator.succeed(successMessage);
+        return result;
+    }
+    catch (err) {
+        loadingIndicator.fail(errorMessage);
+        console.log('\n');
+        throw err;
+    }
+}
+//# sourceMappingURL=wrap-with-loading-indicator.js.map

package/build/utils/wrap-with-loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap-with-loading-indicator.js","sourceRoot":"","sources":["../../src/utils/wrap-with-loading-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,KAAK,CAAA;AAS9C,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAC5C,OAAmB,EACnB,EAAC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAiB;IAE9E,MAAM,gBAAgB,GAAG,GAAG,CAAC,cAAc,CAAC,CAAA;IAC5C,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;IAEtC,IAAI;QACF,MAAM,MAAM,GAAG,MAAM,OAAO,CAAA;QAC5B,gBAAgB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACxC,OAAO,MAAM,CAAA;KACd;IAAC,OAAO,GAAG,EAAE;QACZ,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACnC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACjB,MAAM,GAAG,CAAA;KACV;AACH,CAAC"}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@shopify/shop-minis-cli",
+  "publishConfig": {
+    "access": "public",
+    "@shopify:registry": "https://registry.npmjs.org/"
+  },
+  "version": "0.0.0-snapshot.20240712123821",
+  "description": "Shop Minis CLI",
+  "main": "build/index.js",
+  "bin": {
+    "shop-minis": "build/index.js"
+  },
+  "author": "shopify",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "yarn clean && yarn build:cli:graphql && yarn build:cli && yarn dev-panel:build-and-copy",
+    "clean": "rm -rf build",
+    "build:cli": "tsc -p tsconfig.build.json && chmod 755 build/index.js && cpx \"src/schemas/*.json\" build/schemas",
+    "build:cli:watch": "chokidar \"./src/**/*.ts\" -c \"yarn run build:cli\" --silent --initial --ignore '(build|node_modules)'",
+    "build:cli:graphql": "node --loader ts-node/esm scripts/graphql-codegen.ts",
+    "lint": "eslint . --ext .js,.mjs,.ts,.tsx --format codeframe --cache",
+    "shop-minis": "./build/index.js",
+    "test": "vitest",
+    "test:template": "node --loader ts-node/esm scripts/test-template.ts",
+    "dev-panel:install": "cd ./dev-panel && yarn",
+    "dev-panel:start": "cd ./dev-panel && yarn start",
+    "dev-panel:clean": "cd ./dev-panel && rm -rf build",
+    "dev-panel:build": "cd ./dev-panel &&  PUBLIC_URL=/dev-panel yarn build",
+    "dev-panel:build-and-copy": "mkdir -p build/dev-panel/ && yarn dev-panel:clean && yarn dev-panel:install && yarn dev-panel:build && cp -r dev-panel/build/* build/dev-panel"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^3.2.2",
+    "@graphql-codegen/client-preset": "^2.1.1",
+    "@react-native-community/eslint-config": "^3.1.0",
+    "@shopify/eslint-plugin": "^42.0.1",
+    "@types/connect": "^3.4.35",
+    "@types/envinfo": "^7.8.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/inquirer": "^9.0.3",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.11.17",
+    "@types/prompts": "^2.4.2",
+    "@types/qrcode": "^1.5.0",
+    "@types/serve-static": "^1.15.0",
+    "@types/supertest": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "chokidar-cli": "^3.0.0",
+    "cpx": "^1.5.0",
+    "eslint": "^8.24.0",
+    "eslint-formatter-codeframe": "^7.32.1",
+    "eslint-plugin-reanimated": "^2.0.0",
+    "prettier": "^2.7.1",
+    "supertest": "^7.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "vitest": "^0.29.8"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^7.10.0",
+    "@inquirer/editor": "^1.2.4",
+    "@shopify/cli-kit": "~3.49.1",
+    "@types/jscodeshift": "^0.11.11",
+    "@types/qrcode-terminal": "^0.12.0",
+    "archiver": "^5.3.1",
+    "chalk": "^4.1.2",
+    "commander": "^9.4.1",
+    "connect": "^3.7.0",
+    "dotenv": "^16.0.3",
+    "envinfo": "^7.8.1",
+    "escape-string-regexp": "^4.0.0",
+    "fs-extra": "^11.1.0",
+    "glob": "^9.3.2",
+    "google-auth-library": "9.8.0",
+    "graphql": "15.8.0",
+    "graphql-config": "^4.3.5",
+    "graphql-request": "^5.2.0",
+    "graphql-typescript-definitions": "3.3.6",
+    "inquirer": "^8.2.3",
+    "internal-ip": "^6.2.0",
+    "jscodeshift": "^0.15.1",
+    "json5": "^2.2.3",
+    "jsonschema": "^1.4.1",
+    "lodash": "^4.17.21",
+    "metro": "0.80.4",
+    "metro-config": "0.80.4",
+    "metro-core": "0.80.4",
+    "open": "^8.4.0",
+    "ora": "^5.4.1",
+    "patch-package": "6.5.1",
+    "prompts": "^2.4.2",
+    "qrcode-terminal": "^0.12.0",
+    "replace-in-file": "^6.3.5",
+    "semver": "^7.3.8",
+    "serve-static": "^1.15.0",
+    "suppress-experimental-warnings": "^1.1.17"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1"
+  }
+}

package/scripts/graphql-codegen.ts

@@ -0,0 +1,23 @@
+import {CodegenConfig, generate} from '@graphql-codegen/cli'
+
+import {SHOP_MINIS_ADMIN_API} from '../src/commands/config.js'
+
+const config: CodegenConfig = {
+  schema: SHOP_MINIS_ADMIN_API,
+  documents: ['src/**/*.ts'],
+  generates: {
+    'src/data/types/autogenerated/shop-minis-admin-api/': {
+      preset: 'client-preset',
+    },
+  },
+  hooks: {afterAllFileWrite: ['prettier --write']},
+
+  // Make sure the output is valid esm
+  emitLegacyCommonJSImports: false,
+}
+
+async function generateTypes() {
+  await generate(config, true)
+}
+
+generateTypes()

package/scripts/test-template.ts

@@ -0,0 +1,66 @@
+import {execSync} from 'node:child_process'
+
+import {Command} from 'commander'
+
+import {TEMPLATE_VALUES} from '../src/templates-index.js'
+
+const program = new Command()
+  .name('test-template')
+  .description('Instanciates a template and checks that it is valid')
+  .argument(
+    '<template name>',
+    'Name of the template to use (blank, hello_world, snowboardz)'
+  )
+  .action(async (templateName: string) => {
+    if (!TEMPLATE_VALUES.includes(templateName)) {
+      console.log(
+        `\n${templateName} is not a valid template name. Please use one of ${TEMPLATE_VALUES.join(
+          ', '
+        )}\n`
+      )
+      process.exit(1)
+    }
+
+    // build the CLI
+    execSync('yarn build:cli', {stdio: 'inherit'})
+
+    // set up folder structure
+    execSync('mkdir -p ../templates/', {stdio: 'inherit'})
+    execSync('rm -rf ../templates/test-template', {stdio: 'inherit'}) // just in case this wasn't deleted before
+
+    // build mini
+    execSync(
+      `yarn shop-minis create test-template --template ${templateName} --output-dir ../templates/`,
+      {stdio: 'inherit'}
+    )
+
+    // print package.json
+    execSync(`cat ../templates/test-template/package.json`, {stdio: 'inherit'})
+
+    // run eslint
+    try {
+      execSync('cd ../templates/test-template && yarn lint', {stdio: 'inherit'})
+    } catch {
+      console.log(`\n ⚠️  eslint failed. To reproduce run: 
+        $ cd ../templates/test-template
+        $ yarn lint
+      `)
+      process.exit(1)
+    }
+
+    // run typescript checks
+    try {
+      execSync('cd ../templates/test-template && yarn tsc', {stdio: 'inherit'})
+    } catch {
+      console.log(`\n ⚠️  typescript failed. To reproduce run: 
+        $ cd ../templates/test-template
+        $ yarn tsc
+      `)
+      process.exit(1)
+    }
+
+    // clean up
+    execSync('rm -rf ../templates/test-template', {stdio: 'inherit'})
+  })
+
+program.parse()

package/shipit.snapshot.yml

@@ -0,0 +1,9 @@
+dependencies:
+  override:
+    - yarn install --no-progress --ignore-engines --frozen-lockfile
+
+deploy:
+  override:
+    - yarn build
+    - generate-local-npmrc "@shopify:registry=https://registry.npmjs.org/"
+    - yarn publish --tag snapshot --new-version 0.0.0-snapshot.$(date +%Y%m%d%H%M%S) --no-git-tag-version --access public --verbose

package/templates/__template_blank/src/App.tsx

@@ -0,0 +1,24 @@
+import {StatusBar} from 'react-native'
+import {
+  Box,
+  Text,
+  SafeAreaView,
+  useMinisParams,
+} from '@shopify/shop-minis-platform-sdk'
+
+export function App() {
+  const {extensionData} = useMinisParams()
+  return (
+    <Box flex={1} backgroundColor="backgrounds-regular">
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+        <Text textAlign="center">Fill in the blank</Text>
+        {extensionData ? (
+          <Text textAlign="center">
+            Data from the extension: {JSON.stringify(extensionData)}
+          </Text>
+        ) : null}
+      </SafeAreaView>
+    </Box>
+  )
+}

package/templates/__template_blank/src/index.tsx

@@ -0,0 +1,9 @@
+import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
+
+import {App} from './App'
+
+const config: MiniAppConfig = {
+  ViewerRoot: App,
+}
+
+export default config

package/templates/__template_common/.eslintignore

@@ -0,0 +1 @@
+*.graphql.d.ts

package/templates/__template_common/.eslintrc.js

@@ -0,0 +1,3 @@
+const {minisEslintConfig} = require('@shopify/shop-minis-runtime/eslint-config')
+
+module.exports = minisEslintConfig

package/templates/__template_common/.graphqlrc.js

@@ -0,0 +1 @@
+module.exports = require('@shopify/shop-minis-runtime/graphqlrc')

package/templates/__template_common/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "printWidth": 80
+}

package/templates/__template_common/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: import('react').FC<import('react-native-svg').SvgProps>
+  export default content
+}
+
+declare module '*.png' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}

package/templates/__template_common/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Changes to babel config are not supported by the mini platform.
+  // Custom configuration can introduce unexpected behaviour in your mini and could be a cause of rejection during the submission process.
+  presets: ['@shopify/shop-minis-runtime/babel-preset'],
+}

package/templates/__template_common/gitignore

@@ -0,0 +1,5 @@
+node_modules
+.minis-cache
+*.tsbuildinfo
+.env
+entry-point-params.json

package/templates/__template_common/index.tsx

@@ -0,0 +1,7 @@
+import {renderDevelopmentMini} from '@shopify/shop-minis-runtime/src/utils/renderDevelopmentMini'
+
+import MiniApp from './src'
+
+renderDevelopmentMini(MiniApp, {
+  enableApiSandbox: true,
+})

package/templates/__template_common/metro.config.js

@@ -0,0 +1,5 @@
+const {
+  getMinisMetroConfig,
+} = require('@shopify/shop-minis-runtime/metro-config')
+
+module.exports = getMinisMetroConfig(__dirname)

package/templates/__template_common/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "__MINI_APP_NAME_KEBAB_CASE__",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "shop-minis dev",
+    "submit": "shop-minis submit",
+    "cancel-submission": "shop-minis cancel-submission",
+    "check-submission": "shop-minis check-submission",
+    "test": "jest",
+    "lint": "eslint .",
+    "generate-graphql-types": "shop-minis generate-graphql-types"
+  },
+  "dependencies": {
+    "@shopify/shop-minis-platform-sdk": "__SHOP_MINIS_SDK_VERSION__",
+    "@shopify/shop-minis-runtime": "__SHOP_MINIS_RUNTIME_VERSION__",
+    "@shopify/shop-minis-ui-extensions": "__SHOP_MINIS_UI_EXTENSIONS_VERSION__"
+  },
+  "devDependencies": {
+    "@shopify/shop-minis-cli": "__SHOP_MINIS_CLI_VERSION__",
+    "@types/jest": "^29.2.6",
+    "babel-jest": "^26.6.3",
+    "eslint": "^8.32.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.8.2"
+  },
+  "jest": {
+    "preset": "react-native"
+  },
+  "overrides": {
+    "graphql": "15.8.0",
+    "react": "18.2.0"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1",
+    "graphql": "15.8.0"
+  }
+}

package/templates/__template_common/src/manifest.json

@@ -0,0 +1,6 @@
+{
+  "name": "__MINI_APP_NAME__",
+  "features": [
+    "FULL_BLEED_VIEWER"
+  ]
+}

package/templates/__template_common/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": [
+        "*",
+        "*.ios",
+        "*.android",
+        "./node_modules/@shopify/shop-minis-runtime/node_modules/*"
+      ]
+    },
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "jsx": "preserve",
+    "lib": ["es2019"],
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "moduleResolution": "node",
+    "noEmit": true,
+    "incremental": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "useUnknownInCatchVariables": false
+  },
+  "exclude": ["node_modules"]
+}

package/templates/__template_shoppable_posts/src/App.tsx

@@ -0,0 +1,37 @@
+import {useMemo} from 'react'
+import {StatusBar} from 'react-native'
+import {
+  ShoppablePosts,
+  useMinisParams,
+  MINIS_SANDBOX_SHOP_GID,
+  SafeAreaView,
+  Box,
+  shoppablePostsFixture,
+} from '@shopify/shop-minis-platform-sdk'
+
+/**
+ * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
+ */
+interface MyExtensionDataType {
+  shopId: string
+}
+
+export function App() {
+  const {extensionData} = useMinisParams<MyExtensionDataType>()
+  const shopId = extensionData?.shopId || MINIS_SANDBOX_SHOP_GID
+
+  const shoppablePosts = useMemo(() => {
+    // Format your data in to the shape expected by `<ShoppablePosts />`
+    // return getShoppablePostsFromExtensionData(extensionData)
+    return shoppablePostsFixture
+  }, [])
+
+  return (
+    <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
+      <StatusBar barStyle="light-content" />
+      <SafeAreaView style={{flex: 1}}>
+        <ShoppablePosts initialItems={shoppablePosts} shopId={shopId} />
+      </SafeAreaView>
+    </Box>
+  )
+}

package/templates/__template_shoppable_posts/src/index.tsx

@@ -0,0 +1,9 @@
+import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
+
+import {App} from './App'
+
+const config: MiniAppConfig = {
+  ViewerRoot: App,
+}
+
+export default config

package/templates/__template_shoppable_videos/src/App.tsx

@@ -0,0 +1,34 @@
+import {useMemo} from 'react'
+import {StatusBar} from 'react-native'
+import {
+  ShoppableVideos,
+  useMinisParams,
+  MINIS_SANDBOX_SHOP_GID,
+  Box,
+  shoppableVideosFixture,
+} from '@shopify/shop-minis-platform-sdk'
+
+/**
+ * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
+ */
+interface MyExtensionDataType {
+  shopId: string
+}
+
+export function App() {
+  const {extensionData} = useMinisParams<MyExtensionDataType>()
+  const shopId = extensionData?.shopId || MINIS_SANDBOX_SHOP_GID
+
+  const shoppableVideos = useMemo(() => {
+    // Format your data in to the shape expected by `<ShoppableVideos />`
+    // return getShoppableVideosFromExtensionData(extensionData)
+    return shoppableVideosFixture
+  }, [])
+
+  return (
+    <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
+      <StatusBar barStyle="light-content" />
+      <ShoppableVideos items={shoppableVideos} shopId={shopId} />
+    </Box>
+  )
+}

package/templates/__template_shoppable_videos/src/index.tsx

@@ -0,0 +1,9 @@
+import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
+
+import {App} from './App'
+
+const config: MiniAppConfig = {
+  ViewerRoot: App,
+}
+
+export default config

package/templates/extensions/components/__template_blank/render.tsx

@@ -0,0 +1,11 @@
+import {Text} from '@shopify/shop-minis-platform-sdk'
+
+import type {__QUERY_NAME__QueryData} from './input.graphql'
+
+export function Render({
+  extensionData,
+}: {
+  extensionData: __QUERY_NAME__QueryData | null
+}) {
+  return <Text>{extensionData?.product?.title}</Text>
+}

package/templates/extensions/components/__template_bundle-collection/render.tsx

@@ -0,0 +1,31 @@
+import {BundleCollection} from '@shopify/shop-minis-ui-extensions'
+import {useExtensionShopActions} from '@shopify/shop-minis-platform-sdk/actions'
+
+import type {__QUERY_NAME__QueryData} from './input.graphql'
+import seedData from './seed'
+
+export function Render({
+  extensionData,
+}: {
+  extensionData: __QUERY_NAME__QueryData | null
+}) {
+  const {openMiniViewer} = useExtensionShopActions()
+
+  // Here we are using seed data to populate the initial state of the bundle selector.
+  // You can replace this with the actual data from `extensionData`
+  __EXAMPLE_QUERY_DATA_USE__
+  const {bundles: initialBundles, title} = seedData
+
+  const bundles = initialBundles.map(initialBundle => {
+    return {
+      ...initialBundle,
+      onActionButtonPress: () => {
+        openMiniViewer(initialBundle)
+      },
+    }
+  })
+
+  if (!bundles) return null
+
+  return <BundleCollection title={title} bundles={bundles} />
+}