Include TypeScript type definitions on npm package #1502
Comments
|
Good call; we're TS internally, so I'll see if we can get our bundler to generate a proper |
|
Progress on this? |
|
@MariusVB A contribution here would be much appreciated if anyone knows a tool that can create a top-level |
|
@elalish How about this https://github.com/microsoft/dts-gen? |
|
@MariusVB Well, it looks like that probably won't generate complete typings, but you're welcome to give it a try. As I said, I would really like to have something that automatically produces the proper API typings (since all the type info in already contained in our TS source). If that's impossible, the second best would be some kind of test that checks that a manually-created |
|
What about the second answer in this thread (the one by magikMaker) https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript ? |
|
@Sheldonfrith The trouble is we want a |
|
Bump - March 2021 |
|
Also bump..I assume many webdevs use Angular/React with Typescript, so having type definitions would make model-viewer more accessible.. |
|
Would this help? Or is this orthogonal? https://dev.to/open-wc/introducing-custom-elements-manifest-gkk |
|
Bump - July 2021 |
|
would love to have the typings .. |
|
bump August 2021 |
|
Double bump
On Tue, Aug 10, 2021 at 9:36 AM AhrenFullStop ***@***.***> wrote:
bump August 2021
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1502 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJUO7X6ULOPU7PZXAZKRR3T4ETOTANCNFSM4QVDMDWA>
.
--
*Thanks,*
*Jeff Ward*
*Front-end Developer*
*Tel: 516-551-8624*
***@***.*** ***@***.***>*
***@***.**** <https://twitter.com/#!/jeffscottward>
|
|
One more bump just in case
On Tue, Aug 10, 2021 at 11:09 AM Jeff Ward ***@***.***> wrote:
Double bump
On Tue, Aug 10, 2021 at 9:36 AM AhrenFullStop ***@***.***>
wrote:
> bump August 2021
>
> —
> You are receiving this because you commented.
> Reply to this email directly, view it on GitHub
> <#1502 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AAJUO7X6ULOPU7PZXAZKRR3T4ETOTANCNFSM4QVDMDWA>
> .
>
--
*Thanks,*
*Jeff Ward*
*Front-end Developer*
*Tel: 516-551-8624*
***@***.*** ***@***.***>*
***@***.**** <https://twitter.com/#!/jeffscottward>
--
*Thanks,*
*Jeff Ward*
*Front-end Developer*
*Tel: 516-551-8624*
***@***.*** ***@***.***>*
***@***.**** <https://twitter.com/#!/jeffscottward>
|
|
Okay, so I need some feedback here because this is a surprisingly complicated topic. First thing: we do and have for quite some time published our What we don't have is a unified Has anyone tried this? I'm not very familiar with modern tools for building React/Angular apps, so I need some feedback from those who are. Also, is it possible we are missing some configuration in our package.json that would make this easier or more automatic? |
|
Typescript cannot be assumed to be only for library level or node apps, it
is used day to day with React almost by default (see Next.js).
I see Model-Viewer as just another installable component just like any
other React components that exist on NPM.
I have no use for deduping if I’m already using model-viewer. I would have
just skipped right to raw three.js otherwise.
The standard practice is to install the library/component and then to also
install its types alongside it. DefinitelyTyped is the defacto registry
example:
***@***.***/react
On Tue, Aug 10, 2021 at 3:18 PM Emmett Lalish ***@***.***> wrote:
Okay, so I need some feedback here because this is a surprisingly
complicated topic. First thing: we do and have for quite some time
published our .d.ts files:
***@***.******@***.***/lib/
What we don't have is a unified .d.ts file for our bundle, but if you're
writing TS, do you really want to use our bundled version? Our thought was
that those who wanted to incorporate our project at a deeper level (i.e.
into a larger TS project) would probably rather import the lib, allowing
you to do things like e.g. deduplicate three.js if you're also using it
elsewhere. Of course if you want to stay in the land of public API, you'll
need to only import model-viewer.d.ts (and avoid any symbols), as the rest
of those types are private.
Has anyone tried this? I'm not very familiar with modern tools for
building React/Angular apps, so I need some feedback from those who are.
Also, is it possible we are missing some configuration in our package.json
<https://github.com/google/model-viewer/blob/master/packages/model-viewer/package.json#L22-L23>
that would make this easier or more automatic?
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1502 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJUO7WCNA2CQ4NFNNT3AW3T4F3OXANCNFSM4QVDMDWA>
.
--
*Thanks,*
*Jeff Ward*
*Front-end Developer*
*Tel: 516-551-8624*
***@***.*** ***@***.***>*
***@***.**** <https://twitter.com/#!/jeffscottward>
|
|
I found a solution if you are using Angular. Go to the @NgModule that imports the component that you are using model-viewer on. For me this was my This stops any errors. |
|
@jeffscottward Yes, I agree and I want to make this as seamless as I can. What does your toolchain look like for installing deps for your React app (you'll have to start at the beginning, since I'm not a React user myself). I'm hoping there's a way to simply depend on our |
I use I use For Here are the tags I was having weird trouble with the npm module - some issues with a legacy version? An attempt was made at some point to do typescript (honestly Im not very good at TS but I know the value of it) But yea ideally I want to just I think I would be happiest with an |
|
First thing's first, we've removed IE support, so there is no "legacy" anymore. Seems it's also no longer necessary: #690 (comment) I'm also curious what would happen if you import the library instead of the bundle: Please let me know if any of this bears fruit. I think we're pretty close. |
|
Your docs do not explain how to actually import it via NPM Also I get a compile error right away with this minimum react code |
|
@jeffscottward actually you should use it this way import '@google/model-viewer/lib/model-viewer'
const Test = () => {
return (
<model-viewer src="..."/>
)
}
export default Test@elalish I created a MWE here that can help Literally 3 lines of code to reproduce from scratch Then
|
Couple of items here
|
|
@jeffscottward I agree, but this lib does not have a default export (I believe), so you can't do |
|
Yeah, this is interesting; I have the feeling we may just need to patch up our package.json. I'm guessing when you import |
Would a default export be preferable? I don't have an opinion on this, just trying to figure out best practices. Here is our entry point: https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/model-viewer.ts |
|
@elalish yes so you can name it whatever you feel like as opposed to having to look it up. Wherever it lands do please make sure to update the README of course :) BTW the npm page for the module sends you to the top of monorepo not to the viewer package - was confusing why I was seeing a different readme |
|
Is there any progress or update on this? |
|
Bump Nov |
|
Bump |
|
We could really use a contribution here. The main reason I haven't done this is because I don't know a good way to test if what I'm doing works (since I have no experience with React/yarn/npx etc). Is anyone up for making a PR to tweak our package.json until the |
|
Exciting stuff, I'll try and look into this. Not immediately, but I'm about to use the npm package in my typescript project, and I very much would love to just import model-viewer and have it over with, and I might be able to accomplish that. Thanks for the great work so far! |
|
I'm hoping we have a fix now that will go out with our next release, that will mean importing our |
|
While not a "fix" - I was able to get it working by just using "// @ts-nocheck" at the top of the file that was using model-viewer |
|
I believe this has been fixed in our v1.11 release. I'm going to close this (a little hopefully) to notify people, but please comment a post a new issue if it's still not working for you. |
|
For the ones, still facing problem, I've used this in my project: import { Vector3 } from 'three';
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
// Add model-viewer to the IntrinsicElements list
declare global {
namespace JSX {
interface IntrinsicElements {
'model-viewer': ModelViewerElement;
}
}
}
export interface ModelViewerElement extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'> {
/**
* The URL to the 3D model. Only glTF/GLB models are supported.
*/
src?: string;
'ios-src'?: string;
/**
* Configures the model with custom text that will be used to describe the model to viewers who use a screen reader or otherwise
* depend on additional semantic context to understand what they are viewing.
*/
alt?: string;
/**
* Displays an image instead of the model, useful for showing the user something before a model is loaded and ready to render.
* If you use a poster with transparency, you may also want to set --poster-color to transparent so that the background shows through.
*/
poster?: string;
/**
* If you're using a seamless poster as generated by toBlob({idealAspect: true}) with --poster-color transparent (which is recommended),
* then enable this attribute to turn off the poster's transition. This keeps the shadow from blinking, and the transition is no longer necessary anyway since the poster matches the rendering.
*/
'seamless-poster'?: boolean;
/**
* An enumerable attribute describing under what conditions the model should be preloaded. The supported values are "auto", "lazy" and "eager". Auto is equivalent to lazy, which loads the model
* when it is near the viewport for reveal="auto", and when interacted with for reveal="interaction". Eager loads the model immediately.
*/
loading?: 'eager' | 'lazy' | 'auto';
/**
* This attribute controls when the model should be revealed. It currently supports three values: "auto", "interaction", and "manual".
* If reveal is set to "interaction", <model-viewer> will wait until the user interacts with the poster before loading and revealing the model.
* If reveal is set to "auto", the model will be revealed as soon as it is done loading and rendering. If reveal is set to "manual",
* the model will remain hidden until dismissPoster() is called.
*
* @example: https://modelviewer.dev/examples/loading#preload
*/
reveal?: 'auto' | 'interaction' | 'manual';
/**
* This attribute makes the browser include credentials (cookies, authorization headers or TLS client certificates) in the request to fetch the 3D model. It's useful if the 3D model file is stored on another server that require authentication. By default the file will be fetch without credentials. Note that this has no effect if you are loading files locally or from the same domain.
*/
'with-credentials'?: boolean;
/**
* Controls the environmental reflection of the model. Normally if skybox-image is set, that image will also be used for the environment-image. Use environment-image to only set the reflection without affecting the background. If neither is specified, default lighting will be applied. If 'neutral' is specified without a skybox, then a more evenly-lit environment is applied instead.
*/
'environment-image'?: string;
'camera-controls'?: boolean;
'disable-zoom'?: boolean;
'auto-rotate'?: boolean;
ar?: boolean;
autoplay?: boolean;
'shadow-intensity'?: number | string;
'ar-scale'?: number | string;
bounds?: string;
style?: React.CSSProperties;
ref?: React.MutableRefObject<ModelViewer | undefined>;
}
export interface ModelViewer extends ModelViewerElement {
/**
* This property is read-only. It returns true if the load event below has fired since the last src change.
*/
readonly loaded: boolean;
/**
* This property, pronounced model-is-visible, is read-only. It returns true if the element is visible on the page (assuming there is an IntersectionObserver) and the poster has been dismissed. This property is related to the model-visibility event.
*/
readonly modelIsVisible: boolean;
/**
* This object contains all the methods for the materials API. See examples for usage.
*/
readonly model: Model;
/**
* This property reports an array of strings, corresponding to variants in the loaded model that can be selected with variant-name.
*/
readonly availableVariants: string[];
/**
* Returns a readonly copy of the GLTF JSON object as loaded. Changing this object has no affect on the scene and changes made through
* the materials API are not reflected here. This object is useful for reverting individual changes made through the materials API.
*/
readonly originalGltfJson: GLTF;
/**
* This static, writable property sets <model-viewer>'s DRACO decoder location URL. By default, the DRACO decoder will be loaded from a Google CDN.
* @example https://modelviewer.dev/examples/loading/#dracoSupport
*/
dracoDecoderLocation: string;
/**
* This static, writable property sets <model-viewer>'s KTX2 transcoder location URL. By default, the KTX2 transcoder will be loaded from a Google CDN.
* @example https://modelviewer.dev/examples/loading/#ktx2Support
*/
ktx2TranscoderLocation: string;
/**
* Rotates the model to the orientation specified by roll, pitch, yaw Euler angles, where yaw is first applied about the Y-axis, then pitch about the new local X-axis (positive is front-down), then roll about the new local Z-axis. If specified before the model loads, automatic camera framing will take this change into account; otherwise the updateFraming() method must be called manually.
* Default Value: 0deg 0deg 0deg
* Options: $roll $pitch $yaw
*/
orientation: string;
/**
* Scales the model as specified in the X, Y, and Z directions. Scale is applied before orientation. If specified before the model loads, automatic camera framing will take this change into account; otherwise the updateFraming() method must be called manually.
* Default Value: 1 1 1
* Options: $x $y $z
*/
scale: string;
/**
*
*/
cameraOrbit: string;
/**
* Dismisses the poster, causing the model to load and render if necessary. This is currently effectively the same as interacting with the poster via user input.
*/
dismissPoster(): void;
/**
* Shows the poster, hiding the model. If this is called after the 3D model has been revealed, then it will behave as though reveal='interaction', being dismissed either by a user click or a call to dismissPoster().
*/
showPoster(): void;
/**
* Returns the model's bounding box dimensions in meters, independent of turntable rotation. The returned object has x, y, and z properties along with a toString() method.
*/
getDimensions(): {
x: number;
y: number;
z: number;
toString(): string;
};
/**
* Create your own Texture object.
*/
createTexture(uri: string, type?: 'image/png' | 'image/jpeg' | 'image/webp'): Promise<Texture>;
/**
*
* @param clientX
* @param clientY
* @return Material
* Returns a material whose mesh primitive intersects with a ray created from the input pixel coordinates relative to the screen.
* Returns the material whose mesh is nearest the camera.
*/
materialFromPoint(clientX: Vector3, clientY: Vector3): Material;
/**
* Exports the glTF scene as a Blob object
*/
exportScene(): Promise<Blob>;
/**
* Returns a screenshot of the current model render in the format specified by type (defaults to image/png). The screenshot is encoded
* as a data URL string. In formats that support a sliding scale of quality (such as image/jpeg and image/webp) you can also specify a
* value for encoderOptions between 0 and 1 (encoderOptions defaults to 0.92 otherwise).
*/
toDataURL(type?: 'image/png' | 'image/jpeg' | 'image/webp', encoderOptions?: number): string;
/**
* Returns a promise that resolves into a Blob object in the format specified by the mimeType (defaults to image/png). A Blob object
* represents a file-like object of immutable, raw data. You can also specify a value between 0 and 1 for qualityArgument (Currently
* only available on Chrome desktop and Firefox) which defaults to 0.92 and 0.8 for image/png and image/webp respectively. By setting
* idealAspect to true, the blob will be captured at the ideal poster aspect ratio instead of the canvas aspect ratio. This allows for
* easy poster creation, where a single poster will match the render seamlessly at any canvas aspect ratio.
* It is recommended to use a seamless webp poster image and set --poster-color to transparent and enable seamless-poster.
*/
toBlob(options?: {
mimeType?: 'image/png' | 'image/jpeg' | 'image/webp';
qualityArgument?: number;
idealAspect?: boolean;
}): Promise<Blob>;
/**
* Recalculates the camera defaults in case the model has been changed, for instance by the orientation or scale attributes.
*/
updateFraming(): void;
/**
* Resets the turntable that rotates the model when auto-rotate is enabled. The new value of the turntable rotation will be theta radians after this method is invoked, but the model may not update until the next render frame. If no argument is supplied, theta defaults to zero.
*/
resetTurntableRotation(theta?: number): void;
/**
* Get the current camera phi, theta & radius
*/
getCameraOrbit(): {
phi: number;
radius: number;
theta: number;
toString(): string;
};
}
interface Model {
/**
* An ordered set of unique Materials found in this model. The Materials
* correspond to the listing of materials in the glTF, with the possible
* addition of a default material at the end.
*/
readonly materials: Material[];
// Returns the first material to whose name matches 'name'.
getMaterialByName(name: string): Material | null;
}
interface Material {
name: string;
// Returns the glTF index of this material.
readonly index: number;
readonly normalTexture: TextureInfo | null;
readonly occlusionTexture: TextureInfo | null;
readonly emissiveTexture: TextureInfo | null;
readonly emissiveFactor: RGB;
readonly pbrMetallicRoughness: PBRMetallicRoughness;
setEmissiveFactor(rgb: RGB): void;
setAlphaCutoff(cutoff: number): void;
getAlphaCutoff(): number;
setDoubleSided(doubleSided: boolean): void;
getDoubleSided(): boolean;
setAlphaMode(alphaMode: AlphaMode): void;
getAlphaMode(): AlphaMode;
}
interface PBRMetallicRoughness {
readonly baseColorFactor: RGBA;
readonly metallicFactor: number;
readonly roughnessFactor: number;
readonly baseColorTexture: TextureInfo | null;
readonly metallicRoughnessTexture: TextureInfo | null;
setBaseColorFactor(rgba: RGBA): void;
setMetallicFactor(value: number): void;
setRoughnessFactor(value: number): void;
}
interface TextureInfo {
readonly texture: Texture | null;
/**
* Sets the texture, or removes it if argument is null. Note you cannot build
* your own Texture object, but must either use one from another TextureInfo,
* or create one with the createTexture method.
*/
setTexture(texture: Texture | null): void;
}
interface Texture {
name: string;
readonly sampler: Sampler;
readonly source: Image;
}
interface Sampler {
readonly name: string;
readonly minFilter: MinFilter;
readonly maxFilter: MaxFilter;
readonly wrapS: WrapMode;
readonly wrapT: WrapMode;
setMinFilter(filter: MinFilter): void;
setMaxFilter(filter: MaxFilter): void;
setWrapS(mode: WrapMode): void;
setWrapT(mode: WrapMode): void;
}
interface Image {
readonly name: string;
/**
* The type is 'external' if the image has a configured URI. Otherwise, it is
* considered to be 'embedded'. Note: this distinction is only implied by the
* glTF spec, and is made explicit here for convenience.
*/
readonly type: 'embedded' | 'external';
// The URI of the image, if it is external.
readonly uri?: string;
// The bufferView of the image, if it is embedded.
readonly bufferView?: number;
/**
* A method to create an object URL of this image at the desired
* resolution. Especially useful for KTX2 textures which are GPU compressed,
* and so are unreadable on the CPU without a method like this.
*/
createThumbnail(width: number, height: number): Promise<string>;
}
export type RGBA = [number, number, number, number];
export type RGB = [number, number, number];
type AlphaMode = 'OPAQUE' | 'MASK' | 'BLEND';
enum WrapMode {
ClampToEdge = 33071,
MirroredRepeat = 33648,
Repeat = 10497
}
enum MinFilter {
Nearest = 9728,
Linear = 9729,
NearestMipmapNearest = 9984,
LinearMipmapNearest = 9985,
NearestMipmapLinear = 9986,
LinearMipmapLinear = 9987
}
enum MaxFilter {
Nearest = 9728,
Linear = 9729
} |
|
I keep getting an error when using the I'm currently very active using model-viewer so I'll be giving it constant maintenance. |
|
Thank you, though we do publish our own TS types - do you have any idea why they aren't being picked up in your workflow? |
Description
I'm using this module on a TypeScript React app through npm and I've noticed that it is missing its type definitions.
More specifically, I'm interested in using the Scene Graph API without having to debug or deep dive into the examples and glTF documentation.
I'm currently using the following:
I believe these definitions are probably already inside the
model-viewerrepo, but are not getting exported tonpmLive Demo
N/A
Version
Browser Affected
OS
The text was updated successfully, but these errors were encountered: