create-nymbal-app 0.3.0 → 0.5.0

package/scaffold/templates/astro/src/pages/account/register.astro

@@ -1,5 +1,6 @@
 ---
 import '../../styles/pages/account.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import BaseLayout from '../../layouts/BaseLayout.astro'
 ---
 
@@ -9,78 +10,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
       <h1 class="auth-card-title">Create Account</h1>
       <p class="auth-card-subtitle">Join us and start shopping.</p>
 
-      <div class="checkout-error" id="register-error" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);" role="alert"></div>
-
-      <form id="register-form" data-testid="register-form">
-        <div class="account-form-row">
-          <div class="form-group">
-            <label for="register-firstName">First Name</label>
-            <input
-              type="text"
-              id="register-firstName"
-              name="firstName"
-              autocomplete="given-name"
-              placeholder="First name"
-              data-testid="register-firstName"
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="register-lastName">Last Name</label>
-            <input
-              type="text"
-              id="register-lastName"
-              name="lastName"
-              autocomplete="family-name"
-              placeholder="Last name"
-              data-testid="register-lastName"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="register-email">Email</label>
-          <input
-            type="email"
-            id="register-email"
-            name="email"
-            required
-            autocomplete="email"
-            placeholder="you@example.com"
-            data-testid="register-email"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="register-password">Password</label>
-          <input
-            type="password"
-            id="register-password"
-            name="password"
-            required
-            autocomplete="new-password"
-            placeholder="Choose a password"
-            minlength="8"
-            data-testid="register-password"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="register-phone">Phone (optional)</label>
-          <input
-            type="tel"
-            id="register-phone"
-            name="phone"
-            autocomplete="tel"
-            placeholder="+44 7700 900000"
-            data-testid="register-phone"
-          />
-        </div>
-
-        <button type="submit" class="btn btn-primary" data-testid="register-submit">
-          Create Account
-        </button>
-      </form>
+      <NymbalElement tag="nymbal-register-form" />
 
       <p class="auth-footer">
         Already have an account? <a href="/account/login">Sign in</a>
@@ -90,5 +20,9 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 </BaseLayout>
 
 <script>
-  import '../../scripts/auth-forms.js'
+  import '../../lib/client.js'
+  import { NymbalRegisterForm } from '@nymbalhq/web-components/elements/nymbal-register-form'
+  import '../../scripts/signed-in-redirect.js'
+
+  NymbalRegisterForm.define()
 </script>

package/scaffold/templates/astro/src/pages/cart.astro

@@ -1,16 +1,23 @@
 ---
-import '../styles/pages/cart.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import BaseLayout from '../layouts/BaseLayout.astro'
+import { fetchCart } from '../lib/api'
+
+const cart = await fetchCart(Astro.request.headers.get('cookie'))
 ---
 
-<BaseLayout title="Your Cart | Nymbal" description="Review the items in your cart.">
-  <div class="container section" id="cart-content" data-testid="cart-page">
-    <div class="cart-empty">
-      <h1 class="cart-empty-title">Loading your cart...</h1>
-    </div>
+<BaseLayout title="Your Cart | Nymbal" description="Review the items in your cart." cart={cart}>
+  <div class="container section" data-testid="cart-page">
+    <NymbalElement
+      tag="nymbal-cart-page"
+      attributes={cart === null ? {} : { cart: JSON.stringify(cart) }}
+    />
   </div>
 </BaseLayout>
 
 <script>
-  import '../scripts/cart-page.js'
+  import '../lib/client.js'
+  import { NymbalCartPage } from '@nymbalhq/web-components/elements/nymbal-cart-page'
+
+  NymbalCartPage.define()
 </script>

package/scaffold/templates/astro/src/pages/category/[slug].astro

@@ -1,22 +1,25 @@
 ---
 import '../../styles/pages/plp.css'
-import '../../styles/pages/home.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import Breadcrumb from '../../components/Breadcrumb.astro'
-import ProductCard from '../../components/ProductCard.astro'
-import SortDropdown from '../../components/SortDropdown.astro'
-import Pagination from '../../components/Pagination.astro'
-import { fetchProducts, fetchCategories, sortFromUrl } from '../../lib/api'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardImageOf, cardProductOf } from '@nymbalhq/web-components/ssr'
+import { PRODUCT_SORT_LABELS } from '@nymbalhq/types'
+import { fetchProducts, fetchCategories, fetchCapabilities, sortFromUrl } from '../../lib/api'
 
 const { slug } = Astro.params
-const sort = sortFromUrl(Astro.url)
+const capabilities = await fetchCapabilities()
+const sortKeys = capabilities?.catalog.sortKeys ?? []
+const sort = sortFromUrl(Astro.url, capabilities?.catalog)
 
 const [productResult, categories] = await Promise.all([
   fetchProducts({ limit: 24, category: slug, sort }),
   fetchCategories(),
 ])
 
-const products = productResult.items
+const products = productResult.items.map(cardProductOf)
+// The first card's image is the page's LCP, and the preload scanner never reaches it inside the grid's shadow root:
+// the head starts it.
+const firstImage = products[0] === undefined ? null : cardImageOf(products[0]).url
 const category = categories.find((c) => c.slug === slug)
 const categoryName = category?.name ?? slug ?? 'Category'
 const facets = productResult.facets ?? []
@@ -26,8 +29,9 @@ const facets = productResult.facets ?? []
   title={`${categoryName} | Nymbal`}
   description={category?.description ?? `Browse ${categoryName} products.`}
 >
+  {firstImage && <link slot="head" rel="preload" as="image" href={firstImage} fetchpriority="high" />}
   <div class="container section">
-    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: categoryName }]} />
+    <NymbalElement tag="nymbal-breadcrumb" attributes={{ items: JSON.stringify([{ label: 'Home', href: '/' }, { label: categoryName }]) }} />
 
     <div class="plp-header">
       <h1 class="plp-title">{categoryName}</h1>
@@ -36,33 +40,44 @@ const facets = productResult.facets ?? []
           {category.description}
         </p>
       )}
-      <p class="plp-count" id="product-count">{products.length} products</p>
     </div>
 
     <div class="plp-layout">
       <aside class="plp-sidebar">
-        <nymbal-product-filter
-          facets={JSON.stringify(facets)}
-        ></nymbal-product-filter>
+        {facets.length > 0 && (
+          <nymbal-product-filter
+            facets={JSON.stringify(facets)}
+          ></nymbal-product-filter>
+        )}
       </aside>
 
       <div class="plp-grid-area">
-        <SortDropdown sort={sort} />
-
-        <div class="product-grid" id="product-grid" data-category={slug}>
-          {products.map((product) => (
-            <ProductCard product={product} />
-          ))}
-        </div>
-
-        {products.length === 0 && (
-          <div class="plp-empty">
-            <h2 class="plp-empty-title">No products found</h2>
-            <p class="plp-empty-text">Check back soon for new arrivals.</p>
+        {sortKeys.length > 0 && (
+          <div class="plp-sort-bar">
+            <label for="sort-select">Sort by</label>
+            <nymbal-sort-dropdown
+              sort-keys={JSON.stringify(sortKeys)}
+              value={sort}
+              default-sort={capabilities?.catalog.defaultSort}
+            >
+              <select id="sort-select" data-testid="sort-dropdown">
+                {sortKeys.map((key) => (
+                  <option value={key} selected={key === sort}>{PRODUCT_SORT_LABELS[key]}</option>
+                ))}
+              </select>
+            </nymbal-sort-dropdown>
           </div>
         )}
 
-        <Pagination />
+        <NymbalElement
+          tag="nymbal-product-grid"
+          attributes={{
+            products: JSON.stringify(products),
+            source: 'product-list',
+            ...(productResult.nextCursor !== null && { 'has-more': '' }),
+            'data-category': slug!,
+          }}
+        />
       </div>
     </div>
   </div>

package/scaffold/templates/astro/src/pages/checkout.astro

@@ -1,100 +1,44 @@
 ---
-import '../styles/pages/checkout.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import BaseLayout from '../layouts/BaseLayout.astro'
-import CheckoutSteps from '../components/CheckoutSteps.astro'
-import AddressForm from '../components/AddressForm.astro'
+import { fetchCapabilities, fetchCart } from '../lib/api'
+
+const [capabilities, cart] = await Promise.all([
+  fetchCapabilities(),
+  fetchCart(Astro.request.headers.get('cookie')),
+])
+if (capabilities === null) {
+  throw new Error('The store did not answer GET /api/capabilities, so checkout cannot tell how to take a payment.')
+}
+const escapeAttribute = (value: string): string =>
+  value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;')
+// The payments adapter's client half, the checkout's light-DOM child in its payment slot; a driver the project
+// registers in src/lib/client.ts renders it. HTML, not markup: Astro would take `slot="payment"` on a component's
+// child as a slot of NymbalElement's own.
+const paymentElement = `<nymbal-payment-element slot="payment" data-testid="payment-element" client="${escapeAttribute(
+  JSON.stringify(capabilities.payments.client),
+)}"></nymbal-payment-element>`
 ---
 
-<BaseLayout title="Checkout | Nymbal" description="Complete your purchase.">
+<BaseLayout title="Checkout | Nymbal" description="Complete your purchase." cart={cart}>
   <div class="container section">
-    <h1 style="font-size: 1.75rem; font-weight: var(--nymbal-font-weight-bold, 700); margin-bottom: var(--nymbal-spacing-md, 1rem);">Checkout</h1>
-
-    <div id="checkout-steps-container">
-      <CheckoutSteps currentStep="contact" />
-    </div>
-
-    <div class="checkout-error" id="checkout-error" style="display:none;" data-testid="checkout-error" role="alert"></div>
-
-    <div class="checkout-layout">
-      <div class="checkout-form">
-        <!-- Contact Section -->
-        <section class="checkout-section" id="checkout-contact" data-testid="checkout-contact">
-          <h2 class="checkout-section-title">Contact Information</h2>
-          <form id="contact-form">
-            <div class="form-group">
-              <label for="contact-email">Email Address</label>
-              <input
-                type="email"
-                id="contact-email"
-                name="email"
-                required
-                autocomplete="email"
-                placeholder="you@example.com"
-                data-testid="contact-email"
-              />
-            </div>
-            <button type="submit" class="btn btn-primary" data-testid="contact-continue">
-              Continue to Shipping
-            </button>
-          </form>
-        </section>
-
-        <!-- Shipping Section -->
-        <section class="checkout-section" id="checkout-shipping" style="display:none;" data-testid="checkout-shipping">
-          <h2 class="checkout-section-title">Shipping Address</h2>
-          <form id="shipping-form">
-            <AddressForm id="shipping" />
-            <button type="submit" class="btn btn-primary" style="margin-top: var(--nymbal-spacing-md, 1rem);" data-testid="shipping-continue">
-              Continue to Payment
-            </button>
-          </form>
-        </section>
-
-        <!-- Payment Section -->
-        <section class="checkout-section" id="checkout-payment" style="display:none;" data-testid="checkout-payment">
-          <h2 class="checkout-section-title">Payment</h2>
-          <form id="payment-form" novalidate>
-            <div class="form-group">
-              <label>
-                <input type="checkbox" id="billing-same" checked />
-                Billing address same as shipping
-              </label>
-            </div>
-
-            <div id="billing-fields" style="display:none;">
-              <h3 class="checkout-section-title" style="font-size: 1rem; margin-top: var(--nymbal-spacing-md, 1rem);">Billing Address</h3>
-              <div id="billing-form">
-                <AddressForm id="billing" />
-              </div>
-            </div>
-
-            <div class="payment-section" style="margin-top: var(--nymbal-spacing-md, 1rem);">
-              <label style="margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">Card Details</label>
-              <div id="stripe-card-element" style="padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem); border: 1px solid var(--nymbal-color-border, #e4e4e7); border-radius: var(--nymbal-radius-md, 0.5rem); background: var(--nymbal-color-surface, #fff); min-height: 40px;" data-testid="stripe-card-element">
-                <!-- Stripe CardElement mounts here -->
-              </div>
-            </div>
-
-            <div class="checkout-submit">
-              <button type="submit" class="btn btn-primary" data-testid="place-order">
-                Place Order
-              </button>
-              <p class="checkout-terms">
-                By placing your order, you agree to our terms and conditions.
-              </p>
-            </div>
-          </form>
-        </section>
-      </div>
-
-      <aside class="checkout-summary" id="checkout-summary" data-testid="checkout-summary">
-        <h2 class="checkout-summary-title">Order Summary</h2>
-        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a);">Loading cart...</p>
-      </aside>
-    </div>
+    <NymbalElement tag="nymbal-checkout" attributes={cart === null ? {} : { cart: JSON.stringify(cart) }}>
+      <Fragment set:html={paymentElement} />
+    </NymbalElement>
   </div>
 </BaseLayout>
 
 <script>
-  import '../scripts/checkout.js'
+  import { NymbalCheckout } from '@nymbalhq/web-components/elements/nymbal-checkout'
+  import { NymbalPaymentElement } from '@nymbalhq/web-components/elements/nymbal-payment-element'
+
+  // The page's own elements; the layout defines the rest.
+  NymbalPaymentElement.define()
+  NymbalCheckout.define()
+
+  // The element places the order; the page only goes to it.
+  document.addEventListener('nymbal:checkout:placed', (event) => {
+    const { orderNumber } = (event as CustomEvent<{ orderNumber: string }>).detail
+    window.location.href = `/order/${encodeURIComponent(orderNumber)}`
+  })
 </script>

package/scaffold/templates/astro/src/pages/fragments/footer.astro

@@ -1,5 +1,8 @@
 ---
-import Footer from '../../components/Footer.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { FOOTER } from '../../lib/chrome'
 Astro.response.headers.set('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<Footer />
+<NymbalElement tag="nymbal-site-footer" attributes={FOOTER} />

package/scaffold/templates/astro/src/pages/fragments/header.astro

@@ -1,5 +1,15 @@
 ---
-import Header from '../../components/Header.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { HEADER, headerSlots } from '../../lib/chrome'
+import { headerFragment } from '../../lib/fragments'
+
+const header = await headerFragment()
+if (header instanceof Response) return header
+
 Astro.response.headers.set('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<Header />
+<NymbalElement tag="nymbal-site-header" attributes={HEADER}>
+  <Fragment set:html={headerSlots(header.canSearch)} />
+</NymbalElement>

package/scaffold/templates/astro/src/pages/fragments/nav.astro

@@ -1,9 +1,12 @@
 ---
-import CategoryNav from '../../components/CategoryNav.astro'
-import { fetchCategories } from '../../lib/api'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { navFragment } from '../../lib/fragments'
 
-Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+const nav = await navFragment()
+if (nav instanceof Response) return nav
 
-const categories = await fetchCategories()
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<CategoryNav categories={categories} />
+<NymbalElement tag="nymbal-category-nav" attributes={{ categories: JSON.stringify(nav.categories) }} />

package/scaffold/templates/astro/src/pages/fragments/product/[slug].astro

@@ -1,14 +1,13 @@
 ---
-import ProductCard from '../../../components/ProductCard.astro'
-import { fetchProduct } from '../../../lib/api'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardProductOf } from '@nymbalhq/web-components/ssr'
+import { productFragment } from '../../../lib/fragments'
 
-Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
-
-const { slug } = Astro.params
-const product = await fetchProduct(slug!)
+const card = await productFragment(Astro.params.slug!)
+if (card instanceof Response) return card
 
-if (!product) {
-  return new Response('Not found', { status: 404 })
-}
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<ProductCard product={product} />
+<NymbalElement tag="nymbal-product-card" attributes={{ product: JSON.stringify(cardProductOf(card.product)) }} />

package/scaffold/templates/astro/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
 import '../styles/pages/home.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardImageOf, cardProductOf } from '@nymbalhq/web-components/ssr'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import HeroSection from '../components/HeroSection.astro'
-import CategoryNav from '../components/CategoryNav.astro'
-import ProductCard from '../components/ProductCard.astro'
 import NewsletterSignup from '../components/NewsletterSignup.astro'
 import { fetchProducts, fetchCategories } from '../lib/api'
 import { organizationJsonLd } from '../lib/seo'
@@ -12,17 +12,21 @@ const [productResult, categories] = await Promise.all([
   fetchProducts({ limit: 8 }),
   fetchCategories(),
 ])
+const products = productResult.items.map(cardProductOf)
+// The first card's image is the page's likely LCP, and the preload scanner never reaches it inside the grid's shadow
+// root: the head starts it.
+const firstImage = products[0] === undefined ? null : cardImageOf(products[0]).url
 
-const products = productResult.items
 const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
 ---
 
 <BaseLayout title="Nymbal — Modern Storefront" jsonLd={jsonLd}>
+  {firstImage && <link slot="head" rel="preload" as="image" href={firstImage} fetchpriority="high" />}
   <HeroSection />
 
   <section class="section container">
     <h2 class="section-title">Shop by Category</h2>
-    <CategoryNav categories={categories} />
+    <NymbalElement tag="nymbal-category-nav" attributes={{ categories: JSON.stringify(categories) }} />
   </section>
 
   <section class="featured-section section">
@@ -31,19 +35,18 @@ const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
         <h2 class="section-title" style="margin-bottom: 0;">Featured Products</h2>
         <a href="/products" class="featured-link">View all</a>
       </div>
-      {products.length > 0 ? (
-        <div class="product-grid">
-          {products.map((product) => (
-            <ProductCard product={product} />
-          ))}
-        </div>
-      ) : (
-        <p style="text-align: center; color: var(--nymbal-color-text-muted, #71717a);">
-          Products coming soon.
-        </p>
-      )}
+      <NymbalElement tag="nymbal-product-grid" attributes={{ products: JSON.stringify(products) }} />
     </div>
   </section>
 
   <NewsletterSignup />
 </BaseLayout>
+
+<script>
+  import '../lib/client.js'
+  import { NymbalCategoryNav } from '@nymbalhq/web-components/elements/nymbal-category-nav'
+  import { NymbalProductGrid } from '@nymbalhq/web-components/elements/nymbal-product-grid'
+
+  NymbalCategoryNav.define()
+  NymbalProductGrid.define()
+</script>

package/scaffold/templates/astro/src/pages/order/[orderNumber].astro

@@ -1,9 +1,8 @@
 ---
 import '../../styles/pages/confirmation.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import OrderSummary from '../../components/OrderSummary.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import { fetchOrder } from '../../lib/api'
-import { formatPrice } from '../../lib/format'
 import { isPaid, orderHeading } from '../../lib/order-status'
 
 const { orderNumber } = Astro.params
@@ -11,11 +10,22 @@ const order = await fetchOrder(orderNumber!)
 
 if (!order) return Astro.redirect('/404')
 
-const lineItems = (order.lineItems ?? []).map((item) => ({
-  name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
-  qty: item.qty,
-  priceMinor: item.unitPriceMinor,
-}))
+const summary = {
+  items: JSON.stringify(
+    (order.lineItems ?? []).map((item) => ({
+      name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
+      qty: item.qty,
+      unitPriceMinor: item.unitPriceMinor,
+      lineTotalMinor: item.lineTotalMinor,
+    })),
+  ),
+  'subtotal-minor': String(order.subtotalMinor),
+  'discount-minor': String(order.discountTotalMinor ?? 0),
+  'shipping-minor': String(order.shippingTotalMinor ?? 0),
+  'tax-minor': String(order.taxTotalMinor ?? 0),
+  'total-minor': String(order.totalMinor),
+  currency: order.currency,
+}
 
 const shippingAddress = order.shippingAddress
 const heading = orderHeading(order.status)
@@ -63,45 +73,10 @@ const paid = isPaid(order.status)
             <dd style="text-transform: capitalize;" data-testid="order-status">{order.status}</dd>
           </div>
         </dl>
-
-        <div class="confirmation-items">
-          {lineItems.map((item) => (
-            <div class="confirmation-item">
-              <span>
-                <span class="confirmation-item-name">{item.name}</span>
-                <span class="confirmation-item-qty"> x{item.qty}</span>
-              </span>
-              <span class="confirmation-item-price">
-                {formatPrice(item.priceMinor * item.qty, order.currency)}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        <div class="confirmation-totals">
-          <div class="confirmation-total-row">
-            <span>Subtotal</span>
-            <span>{formatPrice(order.subtotalMinor, order.currency)}</span>
-          </div>
-          {order.shippingTotalMinor != null && (
-            <div class="confirmation-total-row">
-              <span>Shipping</span>
-              <span>{order.shippingTotalMinor === 0 ? 'Free' : formatPrice(order.shippingTotalMinor, order.currency)}</span>
-            </div>
-          )}
-          {order.taxTotalMinor != null && (
-            <div class="confirmation-total-row">
-              <span>Tax</span>
-              <span>{formatPrice(order.taxTotalMinor, order.currency)}</span>
-            </div>
-          )}
-          <div class="confirmation-total-row grand-total">
-            <span>Total</span>
-            <span>{formatPrice(order.totalMinor, order.currency)}</span>
-          </div>
-        </div>
       </div>
 
+      <NymbalElement tag="nymbal-order-summary" attributes={{ class: 'confirmation-summary', ...summary }} />
+
       {shippingAddress && (
         <div class="confirmation-card">
           <h2 class="confirmation-card-title">Shipping Address</h2>
@@ -124,4 +99,7 @@ const paid = isPaid(order.status)
 
 <script>
   import '../../scripts/order-status.js'
+  import { NymbalOrderSummary } from '@nymbalhq/web-components/elements/nymbal-order-summary'
+
+  NymbalOrderSummary.define()
 </script>