Rollup for JS, Babel, Typescript and React with code formatting apis #69

theajr · 2019-10-23T04:23:03Z

Added support for Rollup

Javascript
Babel
Typescript
React + Babel
React + Typescript

Added code formatting apis, which are being used in formatting generated code snippets. We should use the same in webpack and parcel code generation as well. That will in be another PR along with changing sample typescript code in webpack and parcel as mentioned in last comments.

theajr · 2019-10-23T04:23:38Z

#46

jakoblind · 2019-10-23T06:56:26Z

Wow, impressive work @theajr !

I have trouble running the projects. React+typescripts gives the following error when I run npm start:

rollup v1.25.2
bundles src/index.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (6:33)
4: import Button from "./button";
5: 
6: class App extends React.Component<{}, {}> {
                                    ^
7:   render() {
8:     return (
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:5330:30)
    at Module.error (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9606:9)
    at tryParse (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9517:16)
    at Module.setSource (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9835:33)
    at Promise.resolve.catch.then.then.then (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:12615:20)

React+babel gives me the following error when running npm start

rollup v1.25.2
bundles src/index.js → dist/bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (11)/src/index.js
src/index.js (9:6)
 7:   render() {
 8:     return (
 9:       <div>
          ^
10:         <Button text="Sample Button" />
11:       </div>
SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (11)/src/index.js
    at Object.pp$4.raise (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2836:15)
    at Object.pp.unexpected (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:689:10)
    at Object.pp$3.parseExprAtom (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2260:12)
    at Object.parseExprAtom (/home/jlind/Downloads/empty-project (11)/node_modules/rollup/dist/rollup.js:11574:30)
    at Object.pp$3.parseExprSubscripts (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2089:21)
    at Object.pp$3.parseMaybeUnary (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2066:19)
    at Object.pp$3.parseExprOps (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2010:21)
    at Object.pp$3.parseMaybeConditional (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:1993:21)
    at Object.pp$3.parseMaybeAssign (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:1968:21)
    at Object.pp$3.parseParenAndDistinguishExpression (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2332:30)

theajr · 2019-10-23T07:00:35Z

@jakoblind let me check once.

theajr · 2019-10-23T07:11:28Z

I am facing some issue with gatsby. Server is not starting. Do you have any idea how to fix this? I tried google and deleted nodule modules etc.

jakoblind · 2019-10-23T08:19:50Z

I have never seen that issue. Did it work before and suddenly stopped working? Which node version are you using?

jakoblind · 2019-10-23T06:57:53Z

gatsby-node.js

+};
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({


A comment describing why we do this would be nice

Ah, as I mentioned, I was facing some error while using prettier api to format the code snippet. So this piece of code should be added here so that it works. I will keep all these comments and update the PR once my local systems issue is resolved.

ok I see! a comment about this in the code will be very valuable once you get your systems up and running again

Sure! My system issue is happening only with last commit. If I reset hard to previous commit and start the server, it is working fine. I tested the same branch with latest commit in my friend's mac, it is working fine! this is weird! I am setting up a ubuntu virutal machine to see if it helps.

jakoblind · 2019-10-23T08:02:21Z

src/components/configurator/Features.js

@@ -259,6 +263,7 @@ export default class Features extends React.Component {
            onMouseLeave={onMouseLeave}
            selectedBuildTool={selectedBuildTool}
            key={group}
+            expandByDefault={_.size(groupedFeatures) === 1}


Correct me if I'm wrong, but now that we have React, we don't need passing in expandByDefault and the implementation in FeatureGruop?

Yes, we can remove it. But having it won't hurt, in case we are going to add another tab in future this logic may be useful ?

That's a valid point, however, in my experience all line of code adds up to creating complexity so I'm very careful not to have more code than necessary.

If you create a new commit reverting these lines, we'll have the code in git history and we can easily get them back if needed.

jakoblind · 2019-10-23T08:27:33Z

src/templates/rollup/index.js

+export const getIndex = configItems => {
+  const isBabel = _.includes(configItems, 'Babel');
+
+  return getFormattedCode(


Could this call, in theory, be slow? If it makes external API calls or something? If it is then we need to consider doing caching.

No, it's just calling a js function which is inside utils folder. So it won't cause any delay.

These apis are removed in latest commit, somehow the this commit is making some issue in my system. So I corrected the indentation manually. I will try to analyse more once this PR is merged.

theajr · 2019-10-23T09:20:54Z

It used to work my mac got crashed this morning, so restarted. From then, I am unable to start gatsby server. I was using node 10.x LTS version, I tried upgrading to 12.x LTS. still not working. It may take some time.

jakoblind · 2019-10-23T09:30:25Z

ok maybe your error comes from the crash. It works fine for me on 10.x LTS. good luck fixing the mac, hope it isn't too difficult to fix

theajr · 2019-10-23T17:04:57Z

@jakoblind I will let you once this PR is totally ready. I am working on it now.

theajr · 2019-10-23T18:15:14Z

@jakoblind It looks good now. I tested all rollup features from deployed netlify.
You can check now.

jakoblind · 2019-10-24T05:53:03Z

I can reproduce the error you showed me yesterday on my mac. On my linux machine it works fine. Netlify also runs linux I think, that's why it also works there probably. I will help debugging this mac issue.

theajr · 2019-10-24T06:37:30Z

@jakoblind Thanks. I tried the same in my friend's Mac, it was not throwing the error. I created a new Ubuntu virtual machine and there also I could see the issue.

jakoblind · 2019-10-24T06:50:05Z

I pushed a fix to master. Please checkout and test. You might have to remove the node_module folder first.

This was the issue: There was a mismatch between version of NPM dependency sharp

[email protected] /home/jlind/dev/webpack-autoconf
├─┬ [email protected]
│ └─┬ [email protected] (git+https://github.com/Creatiwity/favicons-webpack-plugin.git#0872de414061baaad0a2853c77ae75bc38b8bbbf)
│   └─┬ [email protected]
│     └── [email protected] 
└─┬ [email protected]
  └── [email protected]

After some research I realized that the gatsby-plugin-manifest also provides favicon functionality, so I deleted gatsby-plugin-favicon.

If everything works, you can merge in master to this branch

…toconf into feature/rollup

…nt base in package json

jakoblind · 2019-10-25T06:26:27Z

@theajr I tested running React+babel and still get the same error as before, did you get a chance to look into why this error happens? Let me know if you need help debugging

rollup v1.25.2
bundles src/index.js → dist/bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (13)/src/index.js
src/index.js (9:6)
 7:   render() {
 8:     return (
 9:       <div>
          ^
10:         <Button text="Sample Button" />
11:       </div>
SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (13)/src/index.js
    at Object.pp$4.raise (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2836:15)
    at Object.pp.unexpected (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:689:10)
    at Object.pp$3.parseExprAtom (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2260:12)
    at Object.parseExprAtom (/home/jlind/Downloads/empty-project (13)/node_modules/rollup/dist/rollup.js:11574:30)
    at Object.pp$3.parseExprSubscripts (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2089:21)
    at Object.pp$3.parseMaybeUnary (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2066:19)
    at Object.pp$3.parseExprOps (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2010:21)
    at Object.pp$3.parseMaybeConditional (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:1993:21)
    at Object.pp$3.parseMaybeAssign (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:1968:21)
    at Object.pp$3.parseParenAndDistinguishExpression (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2332:30)

jakoblind · 2019-10-25T12:27:28Z

I experimented a bit and I got it to work. Moving up babel call to the top seemed to help. Also I needed to add resolve({extensions: ['.js', '.jsx', '.json']}), to the resolver call.

plugins: [
        babel({
            exclude: "node_modules/**"
        }),
        resolve({extensions: ['.js', '.jsx', '.json']}),
        commonjs({
            exclude: "src/**"
        }),
        globals(),
    ]

theajr · 2019-10-25T14:14:22Z

@jakoblind Thanks, I don't know why it is working at my end. Still I will add your changes and merge it.

jakoblind · 2019-10-27T06:22:40Z

src/templates/rollup/index.js

+  }
+  plugins.push(`resolve({
+      extensions:${JSON.stringify(resolveExtensions)}
+    }`);


there is a missing ) for resolve

jakoblind · 2019-10-27T06:24:25Z

default file should be rollup.config.js. Currently it's package.json

theajr · 2019-10-27T06:30:19Z

@jakoblind Fixed both now.

jakoblind · 2019-10-28T08:37:29Z

Now React+Babel works for me! Awesome! But I still cannot get React+typescript to work. Could you see if you can reproduce this error? running npm start

rollup v1.26.0
bundles src/index.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (7:33)
5: import Button from './button';
6: 
7: class App extends React.Component<{}, {}> {
                                    ^
8:   render() {
9:     return (
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9627:9)
    at tryParse (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9535:16)
    at Module.setSource (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9852:33)
    at Promise.resolve.catch.then.then.then (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:12641:20)

theajr · 2019-11-04T10:11:01Z

@jakoblind Sure, I will look into it.

jakoblind · 2019-11-06T07:20:01Z

I managed to reproduce on two machines now. But have not yet figured out how to fix it. If this takes to long, we could ship this without typescript support for now just to get it out.

theajr · 2019-11-06T13:57:43Z

@jakoblind I will sit tonight to fix this. I wasn't getting much time recently.

theajr · 2019-11-08T14:02:00Z

@jakoblind I found the fix. I will be pushing the code tomorrow.

jakoblind · 2019-11-08T14:03:15Z

awesome @theajr ! looking forward to read the code. Have a good weekend!

theajr · 2019-11-09T07:03:52Z

@jakoblind I will let you know once PR is ready to review. Have a good weekend.

theajr · 2019-11-10T05:20:44Z

@jakoblind Please check now.

jakoblind · 2019-11-11T09:14:56Z

Hmm. I still get the same error:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.ts (2:24)
1: 
2:   const sayHello = (name:string): string => `Hello, ${name}`;
                           ^
3: 
4:   export default sayHello;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

does it work for you?

theajr · 2019-11-11T09:17:31Z

It's weird. It's always working for me. I never faced this issue. I wonder what is the deal here 😇

jakoblind · 2019-11-11T09:24:51Z

that's weird. what version of npm and node are you using?

theajr · 2019-11-11T09:27:07Z

I am using node 12.13.0 and npm 6.12.0

theajr · 2019-11-11T14:50:05Z

@jakoblind I could reproduce the issue in a actual windows machine(Working fine in windows in VM somehow). If I change the content of index.ts to below content, It is working fine. i.e. removed the data types from code.

Code causing issue:

const sayHello = (name:string): string => `Hello, ${name}`;

export default sayHello;

After removing data types, it is working fine. Can you please check the same and provide your thoughts?

const sayHello = (name) => `Hello, ${name}`;

export default sayHello;

It should support data types as well but seems to be an issue or I am missing something.

jakoblind · 2019-11-12T06:54:34Z

Yes when I do that it's working fine. But then no typescript-specific code is running. I guess the problem is that this file is not run through the typescript compiler for some reason. That's why it works to remove the types.

I'm still confused here. I can reproduce the error on two of my machines. I got a friend to run it and he couldn't reproduce the error.

Anyway, I'll ask around a bit

gengjiawen · 2020-12-19T03:20:19Z

const sayHello = (name:string): string => Hello, ${name};

Is this the only blocker here ?

gengjiawen · 2020-12-21T07:12:23Z

@jakoblind Looks like last merge break build.

jakoblind · 2020-12-21T07:23:18Z

@gengjiawen yeah this PR is now a bit outdated. There have been some refactorings in master. I have limited time, and will not prioritize fix this currently.

theajr added 5 commits October 21, 2019 19:57

Added Webpack Dev Server to Vanilla JS

a452dbb

Rollup support added for Js, Babel and Typescript

f3a9a79

Updated readme template

8e51919

Added React with Babel

f294695

Rollup support added for React Typescript

e61197d

jakoblind reviewed Oct 23, 2019

View reviewed changes

removed lock file

8158bf1

theajr force-pushed the feature/rollup branch from 86d3d93 to 8158bf1 Compare October 23, 2019 16:40

conflict

89ac3bb

Refactor and bugfix

9a657aa

theajr force-pushed the feature/rollup branch from 89ac3bb to 9a657aa Compare October 23, 2019 17:39

Merge branch 'master' into feature/rollup

2a248a4

theajr added 3 commits October 24, 2019 12:21

Merge branch 'feature/rollup' of https://github.com/theajr/webpack-au…

e606bd1

…toconf into feature/rollup

Merge branch 'master' into feature/rollup

96b54e8

Latest pull and removed devServer option from webpack and added conte…

97164df

…nt base in package json

theajr added 2 commits October 26, 2019 12:22

Merge branch 'master' into feature/rollup

bd151cf

Fixed babel issue

5678390

jakoblind reviewed Oct 27, 2019

View reviewed changes

Fixed typo and default file for rollup

e5d372a

jakoblind mentioned this pull request Nov 6, 2019

Support Rollup #46

Open

Fixed bugs

45f5e89

All cases handled

07c89a3

Merge branch 'master' into feature/rollup

d0d38e2

Rollup for JS, Babel, Typescript and React with code formatting apis #69

Are you sure you want to change the base?

Rollup for JS, Babel, Typescript and React with code formatting apis #69

Conversation

theajr commented Oct 23, 2019

theajr commented Oct 23, 2019

jakoblind commented Oct 23, 2019

theajr commented Oct 23, 2019

theajr commented Oct 23, 2019

jakoblind commented Oct 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theajr commented Oct 23, 2019

jakoblind commented Oct 23, 2019

theajr commented Oct 23, 2019

theajr commented Oct 23, 2019

jakoblind commented Oct 24, 2019

theajr commented Oct 24, 2019 • edited Loading

jakoblind commented Oct 24, 2019

jakoblind commented Oct 25, 2019

jakoblind commented Oct 25, 2019

theajr commented Oct 25, 2019

Choose a reason for hiding this comment

jakoblind commented Oct 27, 2019

theajr commented Oct 27, 2019

jakoblind commented Oct 28, 2019

theajr commented Nov 4, 2019

jakoblind commented Nov 6, 2019

theajr commented Nov 6, 2019

theajr commented Nov 8, 2019

jakoblind commented Nov 8, 2019

theajr commented Nov 9, 2019

theajr commented Nov 10, 2019

jakoblind commented Nov 11, 2019

theajr commented Nov 11, 2019

jakoblind commented Nov 11, 2019

theajr commented Nov 11, 2019

theajr commented Nov 11, 2019

jakoblind commented Nov 12, 2019

gengjiawen commented Dec 19, 2020

gengjiawen commented Dec 21, 2020

jakoblind commented Dec 21, 2020

theajr commented Oct 24, 2019 •

edited

Loading