Comments (23)
Looks like it works!
from snowpack.
Would outputting a /web_modules/preact.d.ts
next to /web_modules/preact.js
work? I can't remember the conditions under which TypeScript automatically picks up adjacent d.ts
files.
from snowpack.
got it!
"paths": {
"/web_modules/*.js": [
"node_modules/*",
"web_modules/*.js",
]
},
@DanielRosenwasser thanks for your help to get this far. Last remaining question is: @pika/web writes scoped packages to Update: see next follow up comment.web_modules/@AUTHOR--PACKAGE-NAME.js
with two dashes between the author and the package name. Would it be at all possible to resolve a pattern like that back to node_modules/@AUTHOR/PACKAGE-NAME/...
? I can't think of how without regex, but this just seems to be using globs.
from snowpack.
@FredKSchott I found the following tsconfig.json settings to most reliable...
"compilerOptions": {
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"/web_modules/*.js": [
"node_modules/@types/*",
"node_modules/*",
"web_modules/*.js"
]
},
... rest of tsconfig
}
This worked for react. I did find your above config settings to work well for preact.
from snowpack.
@DangoDev thanks mate, I've corrected the path and the app runs! But missing declaration files were still showing, than of curiosity I've reloaded TS config (switching to VS Code's version than back to workspace) and suddenly all errors went away...lol :D
Thanks!
from snowpack.
@vedtam see how your import is for ../web_modules/
? TypeScript isnβt applying the /web_modules/*.js
resolution from tsconfig.json because the pattern doesnβt match. Delete the ..
and TypeScript should be able to find it.
Also, inside the array, make sure node_modules/@types:*
, node_modules/*
, and web_modules/*
are correct paths, relative to your baseUrl
. But keep the top-level /web_modules/*.js
as-is.
Think of this as an alias to TypeScript, basically. But itβs an alias that when it compiles, maps to an actual path for the browser.
from snowpack.
Thanks @DangoDev, and sorry about the sign-in issue @vedtam!
from snowpack.
I think, unless it creates intermediary proxy .d.ts files, this will never work as expected. for example, when pika goes do his thing, it would have to generate a proxy-packages/preact.d.ts with the contents:
declare module 'web_modules/preact.js' {
import preact from 'preact';
export = preact;
}
the problem with this is that it doesn't allow it to be "/web_modules/preact.js"
since TS gives "Ambient module declaration cannot specify relative module name", and also needs allowSyntheticDefaultimports
to be true which might break stuff. it would then need to "hack" a tsconfig.json to map web_modules/*.js
to /web_modules/*.js
, just trying to think of a way on top of my head
from snowpack.
@lange that's actually a great idea if it works... spinning up a test case now
from snowpack.
Possible problems:
- Type definitions that have relative dependencies (how do we know which to move with our .d.ts file to the web_modules dir?)
- Type definitions that have npm package dependencies (do they resolve to node_modules automatically?)
1 idea: instead of moving a type definition file, is there a way to write our own that says something like export * from 'package-name';
and then let TS resolve it correctly into the node_modules package?
from snowpack.
Also I'll plug the babel plugin if you already have a build pipeline for your app. This would allow you to import packages by name (making TS happy) and then have babel rewrite them to "web_modules/" at build time
from snowpack.
AFAIK, something like export * from 'preact'
in /web_modules/preact.d.ts
should work, but I'm not 100% certain. I'd help experiment but I'm currently crunching on an unrelated deadline π©
from snowpack.
Hmm, looks like it will work for some but not all:
from snowpack.
Small update: using the babel plugin is giving me the best success right now. Still, would love to support TS without needing Babel. @bterlson @DanielRosenwasser any ideas?
from snowpack.
Try using a flat install with yarn and add a path mapping from web_modules to node_modules in your tsconfig.json.
from snowpack.
Ugh that got me so close:
// tsconfig.json
"baseUrl": ".",
"paths": {
"/web_modules/*": [
"web_modules/*",
"node_modules/*",
]
},
import * as preact from '/web_modules/preact.js';
// Loads JS correctly, but can't resolve to preact's package.json "typings" directory
import * as preact from '/web_modules/preact';
// Resolves to preact's package.json "typings" directory, but does not load JS correctly
from snowpack.
Forgot to circle back to this! We no longer use that package name /
-> --
rewriting, so I *THINK* the tsconfig.json
paths snippet above works now. If anyone is able to confirm, I'll add a note to the README.
from snowpack.
And I forgot to tag this issue.
You may look at #38 for a working example with typescript.
from snowpack.
I was curious about this same thing, and I was wondering what itβd take to go the alternate route: use βold styleβ absolute imports, and have a Babel plugin transform them.
import { h } from 'preact'; // before
import { h } from './web_modules/preact'; // after
The idea is that TS has to spit out JS anyway, so itβs safe to transform after-the-fact. Thereβs a proof of concept here, along with a link to a very simple example: babel-plugin-import-pika-web.
Does this make sense? Was thinking itβd help the migration story, at least.
from snowpack.
I think it does make sense. But, if you gonna use Babel to transpile the code, I'd skip the typescript compiler.
Keep the typescript syntax so you can get the tooling and use @babel/preset-typescript to transpile your project. Using Babel AFTER compiling from typescript I think is a little overkill. But should work anyway.
from snowpack.
Thanks @kloy! I've added a note to the README about TypeScript support, which includes your config snippet. LMK if I missed anything in the new section.
from snowpack.
We've come a long way from the original issue. Now that we have a few different options for TS support, I'm going to close this issue and move any future discussion to a "TypeScript - General Discussion" thread on our new package community discussion board: https://www.pika.dev/packages/@pika/web/discuss/1087
Thanks again everyone!
from snowpack.
Hi,
I've tried to leave a comment on the "TypeScript - General Discussion" but after signing in with my GitHub account it keeps asking me to sign in whenever I start writing (checked authorised apps, pika is present).
Back to thread, with the above config ("paths": ...) TS should be able to figure out the location of the declaration files, but it keeps complaining that none was found. Or do I still need to copy the declaration files to "web_modules"?
I have the following structure:
root
βββ node_modules
βββ dist
βββ src/
β βββ index.ts
βββ web_modules
β βββ lit-element.js
βββ tsconfig.json
tsconfig
{
"compilerOptions": {
"target": "es2017",
"module": "esNext",
"moduleResolution": "node",
...
"outDir": "../backend/public/src",
"baseUrl": ".",
"paths": {
"/web_modules/*.js": [
"node_modules/@types/*",
"node_modules/*",
"web_modules/*.js"
]
},
"plugins": [
{ "name": "typescript-tslint-plugin" }
],
},
"include": [
"src/**/*.ts"
],
"exclude": []
}
index.ts
import { LitElement } from '../web_modules/lit-element.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
error TS7016: Could not find a declaration file for module '../web_modules/lit-element.js'. '/Websites/.../frontend/web_modules/lit-element.js' implicitly has an 'any' type
Thanks!
from snowpack.
Related Issues (20)
- π BUG: Can't quit dev server Win11 HOT 2
- π‘ RFC: Option to skip esbuild transform
- π BUG: hmr-client.js fails to load when inside of a srcdoc iframe
- Install snowpack for development failed. HOT 2
- π‘ RFC: Allow acess to hmr engine websocket service
- π BUG: [esinstall] duplicate export 'default' react
- π BUG: dev server fails with "Uncaught TypeError: require$$0 is not a function" due to incorrect require() transform
- π BUG: esinstall: πPutout support
- AMD requirejs module support (or docs on how to ..)
- π BUG: Skypack build fails if using modern JS features
- π BUG: `index.bin.js` file is mistaken as Trojan by Kaspersky and got deleted HOT 2
- π‘ RFC: Setting to hide deprecated options in the docs
- π BUG: default export problem
- π BUG: problem with default export / import in some cases HOT 1
- π BUG:
- π BUG: Snowpack can't find /src/index.jsx no matter what I do? HOT 1
- π BUG: Can't transpile files with new ES features such as optional chaining and private class fields
- π BUG: vm2 has been discontinued and has a critical vulnerability identified
- I can't install a template. HOT 1
- π BUG: Build Result Error: There was a problem with a file build result. [object Object]
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snowpack.