Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
If you're not yet familiar with the @google/model-viewer package you can find the docs here, the examples here, and the github repo here.
import "../styles/index.css"; import Script from "next/script"; import type { AppProps } from "next/app"; import Head from "next/head"; type UIAppProps
= AppProps
& { Component: AppProps["Component"] & { getLayout: (page: ReactNode) => ReactNode; }; }; /* I'm using NextAuth in the real application and pass `SessionProviderProps` instead of `Record` which gives strongly typed access to fields therein */ export default function VirtualStoreExperience({ Component, pageProps }: UIAppProps>) { // inject the next app with the latest version of `@google/model-viewer` return ( <> {"Virtual Marketplace"}title> Head> <Script async strategy='afterInteractive' type='module' src='https://unpkg.com/@google/model-viewer@^2.1.1/dist/model-viewer.min.js' /> <Component {...pageProps} /> </> ); }
While we could delve into type definitions, decorators, the shadow dom, and globally accessible bits and pieces of the @google/model-viewer package, I'll spare those details in the spirit of keeping this entry on the shorter side. I will say that the package uses lit, three, and @types/three; the package, once installed and instantiated via a root script import in the src/pages/_app.tsx file (more on that shortly), has a typedef of utility exposed for consumption via an interface in the globalThis module. Specifically, it becomes accessible through the HTMLElementTagNameMap interface which, assuming @google/model-viewer and typescript are both installed if you've made it this far, has two separate definitions in node_modules. The first primary definition for HTMLElementTagNameMap is found in the typescript/lib/lib.dom.d.ts file; the second definition, an augmented global declaration, is housed in the @google/model-viewer/lib/model-viewer.d.ts file. The augmented file contains the following several-dozen lines of code: