Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript support: Let api-dev-server and webpack load .ts and .tsx files #438

Merged
merged 4 commits into from
Apr 18, 2020
Merged

TypeScript support: Let api-dev-server and webpack load .ts and .tsx files #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f59ee4
Update paths and webpack to load ts|x files.
peterp Apr 17, 2020
8e9ef89
Fix internal build watch command.
peterp Apr 17, 2020
b61eab4
Fix tests.
peterp Apr 17, 2020
f082214
Fix comment.
peterp Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 8 additions & 13 deletions packages/core/config/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ module.exports = (webpackEnv) => {
mode: isEnvProduction ? 'production' : 'development',
devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
entry: {
app: path.resolve(redwoodPaths.base, 'web/src/index.js'),
app: path.resolve(redwoodPaths.base, 'web/src/index'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
Expand Down Expand Up @@ -158,28 +158,23 @@ module.exports = (webpackEnv) => {
],
},
{
// Automatically import files in `src/pages/*` in to
// the `src/Routes.[ts|jsx]` file.
test: redwoodPaths.web.routes,
use: {
loader: path.resolve(
__dirname,
'..',
'dist',
'loaders',
'routes-auto-loader'
'../dist/loaders/routes-auto-loader'
),
},
},
{
test: /.+Cell.js$/,
// "Create" an `index.js` file adjacent to a user's Cell.js|tsx file
// so that the Cell exports are run through the `withCell` HOC
test: /.+Cell.(js|tsx)$/,
include: path.join(redwoodPaths.base, 'web/src/components'),
use: {
loader: path.resolve(
__dirname,
'..',
'dist',
'loaders',
'cell-loader'
),
loader: path.resolve(__dirname, '../dist/loaders/cell-loader'),
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion packages/internal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"build:js": "yarn cross-env NODE_ENV=production babel src -d dist --delete-dir-on-start --extensions \".js,.ts\" --source-maps inline",
"build:types": "tsc --declaration --emitDeclarationOnly",
"prepublishOnly": "yarn build",
"build:watch": "nodemon --ignore dist --exec 'yarn build'",
"build:watch": "nodemon --watch src --ext 'js,ts,tsx' --ignore dist --exec 'yarn build'",
"test": "jest",
"test:watch": "yarn test --watch"
},
Expand Down
24 changes: 16 additions & 8 deletions packages/internal/src/paths.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const PATH_API_DIR_DB_SCHEMA = 'api/prisma/schema.prisma'
const PATH_API_DIR_CONFIG = 'api/src/config'
const PATH_API_DIR_SERVICES = 'api/src/services'
const PATH_API_DIR_SRC = 'api/src'
const PATH_WEB_ROUTES = 'web/src/Routes.js'
const PATH_WEB_ROUTES = 'web/src/Routes' // .js|.tsx
const PATH_WEB_DIR_LAYOUTS = 'web/src/layouts/'
const PATH_WEB_DIR_PAGES = 'web/src/pages/'
const PATH_WEB_DIR_COMPONENTS = 'web/src/components'
Expand Down Expand Up @@ -45,6 +45,12 @@ export const getBaseDir = (configPath: string = getConfigPath()): string => {
* Path constants that are relevant to a Redwood project.
*/
export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
// The path.web.routes file can either be a js or a tsx file. We use
// nodejs internals to resolve it.
require.extensions['.tsx'] = () => undefined
require.extensions['.ts'] = () => undefined
const routes = require.resolve(path.join(BASE_DIR, PATH_WEB_ROUTES))

return {
base: BASE_DIR,
api: {
Expand All @@ -57,7 +63,7 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
src: path.join(BASE_DIR, PATH_API_DIR_SRC),
},
web: {
routes: path.join(BASE_DIR, PATH_WEB_ROUTES),
routes,
pages: path.join(BASE_DIR, PATH_WEB_DIR_PAGES),
components: path.join(BASE_DIR, PATH_WEB_DIR_COMPONENTS),
layouts: path.join(BASE_DIR, PATH_WEB_DIR_LAYOUTS),
Expand All @@ -82,14 +88,16 @@ export const processPagesDir = (
// subdirectories.
entries.forEach((entry) => {
if (entry.isDirectory()) {
// Actual JS files reside in a directory of the same name, so let's
// construct the filename of the actual Page file.
const testFile = path.join(webPagesDir, entry.name, entry.name + '.js')
try {
// Actual page js or tsx files reside in a directory of the same
// name (supported by: directory-named-webpack-plugin), so let's
// construct the filename of the actual Page file.
// `require.resolve` will throw if a module cannot be found.
require.resolve(path.join(webPagesDir, entry.name, entry.name))

if (fs.existsSync(testFile)) {
// If the Page exists, then construct the dependency object and push it
// onto the deps array.
const basename = path.posix.basename(entry.name, '.js')
const basename = path.posix.basename(entry.name)
const importName = prefix.join() + basename
// `src/pages/<PageName>`
const importFile = ['src', 'pages', ...prefix, basename].join('/')
Expand All @@ -98,7 +106,7 @@ export const processPagesDir = (
path: path.join(webPagesDir, entry.name),
importStatement: `const ${importName} = { name: '${importName}', loader: () => import('${importFile}') }`,
})
} else {
} catch (e) {
// If the Page doesn't exist then we are in a directory of Page
// directories, so let's recurse into it and do the whole thing over
// again.
Expand Down