[feature request] webpack branch with typescript

[seddonm1]

Hi, I am new to polymer and love the simplicity of lit-html but have struggled to be productive due to so few public packages supporting es6 modules.

I am really struggling to add typescript support to the webpack branch (https://github.com/Polymer/pwa-starter-kit/tree/webpack) which I view as critical after coming back to the browser from strongly-typed languages.

Is it possible to do a webpack-template-typescript branch?

[keanulee]

Comparing the webpack branch with master, I don't see any additions that would break the TS branch. Maybe start with the template-typescript branch and add in the changes in the webpack diff.

[seddonm1]

thanks. I have tried to add webpack to the template-typescript and have it compiling but the lit-elements are not being bound correctly so are not updating. This is probably something really straight forward but I am completely stumped. Could you please have a look?

relevant bit of webpack.config.js

module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/typescript',
              '@babel/preset-env'
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose": true }],
              '@babel/proposal-object-rest-spread',
              'dynamic-import-webpack'
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },

and package.json:

  "devDependencies": {
    "@babel/core": "7.3.4",
    "@babel/plugin-proposal-class-properties": "7.3.4",
    "@babel/plugin-proposal-decorators": "7.3.0",
    "@babel/preset-env": "7.3.4",
    "@babel/preset-typescript": "7.3.3",
    "@polymer/test-fixture": "^4.0.2",
    "axe-core": "^3.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "chai": "^4.1.2",
    "copy-webpack-plugin": "^4.6.0",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-rename": "^1.3.0",
    "gulp-replace": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mocha": "^5.2.0",
    "pixelmatch": "^4.0.2",
    "polymer-cli": "^1.9.3",
    "polyserve": "^0.27.0",
    "prpl-server": "^1.4.0",
    "puppeteer": "^1.5.0",
    "wct-mocha": "^1.0.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.4",
    "workbox-webpack-plugin": "^3.6.3"
  }

[logicalphase]

I know that @anoblet has a running TS w/ webpack running at https://github.com/anoblet/my-project which might be a good guide to check out.

[seddonm1]

Thanks. Slight progress by changing to ts-loader in that now events are being received by components.

Just need to overcome the problem of dynamic imports in ./actions/app.ts

Module parse failed: 'import' and 'export' may only appear at the top level (32:12)

[anoblet]

Do you have a repo I could look at?

I just use:

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts"]
  },

[seddonm1]

Hi, So found the problem. webpack 4.29.6 fails with that error where webpack 4.28.4 succeeds (found via github trawling) apparently due to an 'acorn' library duplication issue (gotta love npm).

Here is a functioning repo: https://github.com/seddonm1/pwa-starter-kit/tree/template-typescript-webpack

git clone --depth 1 -b template-typescript-webpack --single-branch https://github.com/seddonm1/pwa-starter-kit my-app

I can do a PR if you are want. I think this is very useful for starters:

• has typescript which makes js code bases manageable.
• works with npm packages as i found most packages are not ES modules yet.

Thanks for your help.

[keanulee]

Thanks @seddonm1 @hyperpress @anoblet for your investigation. I made a template-typescript-webpack branch from merging the TS and webpack branches and applying the patches mentioned above.