@ohos-ports/shopify 4.8.0-beta.0

package/dist/assets/hydrogen/starter/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "include": [
+    "env.d.ts",
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.d.ts",
+    "*.ts",
+    "*.tsx",
+    "*.d.ts",
+    ".graphqlrc.ts",
+    ".react-router/types/**/*"
+  ],
+  "exclude": ["node_modules", "dist", "build", "packages/**/dist/**/*"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "module": "ES2022",
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "types": [
+      "@shopify/oxygen-workers-types",
+      "react-router",
+      "@shopify/hydrogen/react-router-types",
+      "vite/client"
+    ],
+    "paths": {
+      "~/*": ["app/*"]
+    },
+    "noEmit": true,
+    "rootDirs": [".", "./.react-router/types"],
+    "incremental": true,
+    "composite": false,
+    "verbatimModuleSyntax": true
+  }
+}

package/dist/assets/hydrogen/starter/vite.config.ts

@@ -0,0 +1,44 @@
+import {fileURLToPath} from 'node:url';
+import {defineConfig} from 'vite';
+import {hydrogen} from '@shopify/hydrogen/vite';
+import {oxygen} from '@shopify/mini-oxygen/vite';
+import {reactRouter} from '@react-router/dev/vite';
+
+export default defineConfig({
+  plugins: [hydrogen(), oxygen(), reactRouter()],
+  resolve: {
+    alias: {
+      // Vite's native tsconfig path resolver does not cover JavaScript
+      // projects that use jsconfig.json, so define Hydrogen's app alias here.
+      '~': fileURLToPath(new URL('./app', import.meta.url)),
+    },
+    tsconfigPaths: true,
+  },
+  build: {
+    // Allow a strict Content-Security-Policy
+    // without inlining assets as base64:
+    assetsInlineLimit: 0,
+  },
+  ssr: {
+    optimizeDeps: {
+      /**
+       * Include dependencies here if they throw CJS<>ESM errors.
+       * For example, for the following error:
+       *
+       * > ReferenceError: module is not defined
+       * >   at /Users/.../node_modules/example-dep/index.js:1:1
+       *
+       * Include 'example-dep' in the array below.
+       * @see https://vitejs.dev/config/dep-optimization-options
+       */
+      include: [
+        'react-router > set-cookie-parser',
+        'react-router > cookie',
+        'react-router',
+      ],
+    },
+  },
+  server: {
+    allowedHosts: ['.tryhydrogen.dev'],
+  },
+});

package/dist/assets/hydrogen/tailwind/package.json

@@ -0,0 +1,11 @@
+{
+  "browserslist": [
+    "defaults"
+  ],
+  "dependencies": {
+    "tailwindcss": "^4.1.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.6"
+  }
+}

package/dist/assets/hydrogen/tailwind/tailwind.css

@@ -0,0 +1,6 @@
+/**
+ * Configure Tailwind v4 in this file using CSS variables and directives:
+ * https://tailwindcss.com/docs/v4-beta#css-first-configuration
+ */
+
+@import 'tailwindcss';

package/dist/assets/hydrogen/vanilla-extract/package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.1"
+  },
+  "devDependencies": {
+    "@vanilla-extract/vite-plugin": "^5.0.1"
+  }
+}

package/dist/assets/hydrogen/virtual-routes/assets/debug-network.css

@@ -0,0 +1,609 @@
+:root {
+  --background-color: #f1f1f1;
+  --primary-color: #333333;
+  --secondary-color: #e3e3e3;
+  --shadow-color: #999;
+  --dark-border-color: #666;
+  --button-state-color: #fafafa;
+  --secondary-text-color: #616161;
+  --highlight-color: #f5f5f5;
+  --hover-highlight-color: rgba(230, 238, 254, 0.5);
+  --active-highlight-color: #e6eefe;
+  --button-border: 1px solid rgba(51, 51, 51, 0.75);
+
+  --text-large: 0.813rem;
+  --text-normal: 0.688rem;
+  --font-bold: 650;
+
+  --box-shadow: 0 0.125rem 0.0625rem #0000000d, 0 0 0.0625rem #42474c73;
+}
+
+body {
+  color: var(--primary-color);
+  font-size: var(--text-normal);
+}
+
+input[type='checkbox'] {
+  display: grid;
+  place-content: center;
+
+  accent-color: var(--primary-color);
+
+  width: 1.15em;
+  height: 1.15em;
+}
+
+.text-normal {
+  font-size: var(--text-normal);
+}
+
+.text-large {
+  font-size: var(--text-large);
+}
+
+.bold {
+  font-weight: var(--font-bold);
+}
+
+.bold-1 {
+  font-weight: 550;
+}
+
+.flex-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-direction: row;
+}
+
+.gap-small {
+  gap: 0.5rem;
+}
+
+.gap-tiny {
+  gap: 0.25rem;
+}
+
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-control {
+  display: grid;
+  grid-template-columns: 1rem auto;
+  gap: 0.7rem;
+  align-items: center;
+}
+
+.form-control > * {
+  opacity: 75%;
+}
+
+.form-control > input:checked,
+.form-control > input:checked + label {
+  opacity: 100%;
+}
+
+header {
+  height: 3.5rem;
+  box-shadow: var(--box-shadow);
+}
+
+header .logo {
+  width: 16.7px;
+}
+
+header h1 {
+  font-size: var(--text-large);
+  font-weight: normal;
+  padding-left: 0.75rem;
+  color: #000;
+}
+
+.pill {
+  background-color: #f4f4f4;
+  border-radius: 4rem;
+  padding: 0.2rem 0.8rem;
+  font-size: 0.75rem;
+}
+
+.word-break-all {
+  word-break: break-all;
+}
+
+/* Button */
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  appearance: button;
+  border-radius: 0.375rem;
+  border: var(--button-border);
+  background: #fff;
+  padding: 0.375rem 0.75rem;
+}
+
+button.plain {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+button.icon {
+  padding: 0.25rem;
+  line-height: 0;
+}
+
+button:hover {
+  background-color: #fafafa;
+}
+
+button:focus {
+  outline: 2px solid #005bd3;
+  outline-offset: 1px;
+  background-color: #fff;
+}
+
+button:active {
+  box-shadow: 0px 2px 0px 0px #c1c2c2 inset;
+  background-color: #ccc;
+}
+
+button.primary {
+  background-color: #0554f2;
+  color: #fff;
+  border: none;
+  font-weight: 600;
+}
+
+button:hover.primary {
+  background-color: #0c54e6;
+}
+
+button:focus.primary {
+  background-color: #0e50d4;
+}
+
+button:active.primary {
+  box-shadow: 0px 3px 4px 0px #0446cb inset;
+  background-color: #0e50d4;
+  color: #fff;
+}
+
+#buttonClear {
+  display: flex;
+  align-items: center;
+  padding-left: 0.5rem;
+}
+
+#buttonClear span {
+  padding-left: 2px;
+}
+
+#server-network-timing {
+  display: grid;
+  grid-template-rows: 3.5rem auto;
+  min-height: 100vh;
+}
+
+#server-network-timing.withNotification {
+  grid-template-rows: 3rem 3.5rem auto;
+}
+
+#main.empty {
+  display: grid;
+  grid-template-rows: 4rem auto;
+}
+
+#main.empty #request-info {
+  display: none;
+}
+
+.pad {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.link-margin-top {
+  margin-top: 0.5rem;
+}
+
+#options-and-legend {
+  height: 4rem;
+}
+
+#options-and-legend p {
+  font-size: var(--text-normal);
+}
+
+.legend {
+  background-color: var(--highlight-color);
+  border-radius: 0.125rem;
+  padding: 0.25rem 0.5rem;
+  gap: 0.75rem;
+}
+
+.swatch {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 0.125rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+#request-waterfall {
+  border-top: 1px solid var(--secondary-color);
+  border-bottom: 1px solid var(--secondary-color);
+  overflow: hidden;
+}
+
+#request-waterfall .request-waterfall-chart {
+  height: calc(60vh - 3.85rem);
+  width: calc(99.8vw - 1.75rem);
+}
+
+#server-network-timing.withNotification
+  #request-waterfall
+  .request-waterfall-chart {
+  height: calc(60vh - 5.35rem);
+}
+
+#request-info {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+
+  height: calc(40vh - 3.85rem);
+}
+
+#server-network-timing.withNotification #request-info {
+  height: calc(40vh - 5.35rem);
+}
+
+#request-info > div {
+  flex: 1;
+}
+
+#request-table__content .grid-row:nth-child(odd) {
+  background-color: var(--highlight-color);
+}
+
+#request-table {
+  height: 100%;
+}
+
+#request-table > div {
+  padding: 0;
+  font-size: var(--text-large);
+  display: grid;
+  grid-template-rows: 2.75rem auto 2rem;
+  height: 100%;
+}
+
+#request-table .grid-row {
+  display: grid;
+  grid-template-columns: 1fr 80px 80px;
+  border-bottom: 1px solid var(--secondary-color);
+}
+
+#request-table__content .grid-row {
+  cursor: pointer;
+}
+
+#request-table__content .grid-row:hover {
+  background-color: var(--hover-highlight-color);
+}
+
+#request-table .grid-cell {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  place-self: stretch;
+  align-self: center;
+  padding: 0.5rem 0;
+}
+
+#request-table .grid-cell:first-child {
+  padding-left: 1rem;
+}
+
+#request-table .grid-cell:last-child {
+  padding-right: 0.75rem;
+}
+
+#request-table__header.grid-row {
+  font-weight: 550;
+  font-size: var(--text-normal);
+}
+
+#request-table__header.grid-cell {
+  border-top: none;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  opacity: 75%;
+}
+
+#request-table__content {
+  overflow: auto;
+}
+
+#request-table__content .grid-row.active {
+  background-color: var(--active-highlight-color);
+}
+
+#request-table__footer {
+  border-top: 1px solid var(--secondary-color);
+  padding: 0.5rem 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--text-normal);
+}
+
+/** Tab panels */
+
+#close-request-detail {
+  padding-left: 3px;
+}
+
+#request-detail-header {
+  display: grid;
+  grid-template-columns: auto min-content;
+  align-items: center;
+  padding-left: calc(1rem - 2px);
+  padding-right: 1rem;
+}
+
+#tabButtons {
+  overflow-x: scroll;
+  padding: 2px;
+}
+
+#tabButtons::-webkit-scrollbar {
+  display: none;
+}
+
+#tab-buttons-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: scroll;
+}
+#tab-buttons-wrapper .fadCover {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+
+  --gradient-color-start: rgba(255, 255, 255, 1);
+  --gradient-color-end: transparent;
+  --background-color: transparent;
+
+  background-image:
+    linear-gradient(to right, var(--background-color), var(--background-color)),
+    linear-gradient(to right, var(--background-color), var(--background-color)),
+    linear-gradient(
+      to right,
+      var(--gradient-color-start),
+      var(--gradient-color-end)
+    ),
+    linear-gradient(
+      to left,
+      var(--gradient-color-start),
+      var(--gradient-color-end)
+    );
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center;
+  background-repeat: no-repeat;
+  background-color: var(--background-color);
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    0px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+#tab-buttons-wrapper .fadCover.fadeLeft {
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    0px 100%;
+}
+
+#tab-buttons-wrapper .fadCover.fadeRight {
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    40px 100%;
+}
+
+#tab-buttons-wrapper .fadCover.fadeLeftRight {
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    40px 100%;
+}
+
+.tabPanels .tabPanel {
+  display: none;
+
+  overflow: auto;
+  padding-bottom: 0.75rem;
+}
+
+.tabPanels > .tabPanel.active {
+  display: flex;
+  gap: 0.75rem;
+  flex-direction: column;
+}
+
+#request-details-panel {
+  display: none;
+  max-width: 50vw;
+}
+
+#request-details-panel.active {
+  display: block;
+}
+
+#request-detail {
+  display: grid;
+  grid-template-rows: 2.75rem auto;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid var(--secondary-color);
+}
+
+#request-detail > .flex-row {
+  padding-left: 0.75rem;
+  padding-right: 1rem;
+}
+
+#request-detail .tabPanels {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+}
+
+#request-detail div.tab {
+  background-color: transparent;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  font-size: var(--text-normal);
+  cursor: pointer;
+}
+
+#request-detail div.tab.active {
+  background-color: var(--active-highlight-color);
+}
+
+#request-detail div.tab:hover {
+  background-color: var(--hover-highlight-color);
+}
+
+#request-detail .tabPanels .grid-layout a {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#request-detail .grid-layout {
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: minmax(50px, 100px) auto;
+  margin-bottom: 1rem;
+  font-size: var(--text-large);
+}
+
+.tabPanel .gridTitle {
+  font-weight: 550;
+  opacity: 75%;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--highlight-color);
+  height: 3rem;
+}
+
+.notification p {
+  font-size: var(--text-normal);
+  color: var(--secondary-text-color);
+}
+
+#close-notification {
+  position: absolute;
+  right: 0.5rem;
+}
+
+#empty-view {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.code-json {
+  white-space: pre;
+  font-size: var(--text-normal);
+}
+
+.error {
+  color: #b32720;
+}
+
+@media (max-width: 940px) {
+  #main.empty {
+    display: grid;
+    grid-template-rows: 6.59rem auto;
+  }
+
+  #options-and-legend {
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 1rem;
+
+    padding: 1rem;
+    height: 6.59rem;
+    width: 100vw;
+    overflow-x: scroll;
+  }
+
+  #options-and-legend > .flex-row {
+    min-width: 453px;
+  }
+
+  #request-waterfall .request-waterfall-chart {
+    height: calc(60vh - 5.145rem);
+  }
+
+  #server-network-timing.withNotification
+    #request-waterfall
+    .request-waterfall-chart {
+    height: calc(60vh - 6.645rem);
+  }
+
+  #request-info {
+    height: calc(40vh - 5.145rem);
+  }
+
+  #server-network-timing.withNotification #request-info {
+    height: calc(40vh - 6.645rem);
+  }
+
+  #request-table .grid-row {
+    grid-template-columns: 1fr 55px 55px;
+  }
+}
+
+@media (max-width: 575px) {
+  #request-detail .tabPanel .grid-layout {
+    display: flex;
+    flex-direction: column;
+  }
+}