feat: creates new playground with next.js #929

kennethaasan · 2024-02-29T13:41:23Z

Description

Changes proposed in this pull request:

creates new playground with next.js
upgrades typescript

Related issue(s)

Partly fixes #891

This reverts commit 2e5873a.

derberg · 2024-02-29T16:25:42Z

Thanks so much @kennethaasan 🚀

have some initial feedback

there are some code smells in playground https://sonarcloud.io/project/issues?id=asyncapi_asyncapi-react&pullRequest=929&resolved=false&inNewCodePeriod=true but since Playground is purely for local development not to be used by anyone for different purposes, just add whole playground to ignore in https://github.com/asyncapi/asyncapi-react/blob/master/.sonarcloud.properties
I don't think we can remove playground/bump-react-comp.sh and corresponding script 🤔

locally when I start playground I get below error and it is because @asyncapi is not there in node_modules of playground...usually is when I do npm i from root as lorna makes sure dependencies are installed and symlinks created - this time looks like symlink was not created 🤔

./app/page.tsx:2:0
Module not found: Can't resolve '@asyncapi/react-component/styles/default.min.css'
  1 | 'use client';
> 2 | import '@asyncapi/react-component/styles/default.min.css';
  3 | import React, { Component } from 'react';
  4 | import AsyncApi, { ConfigInterface } from '@asyncapi/react-component';
  5 | import {

  https://nextjs.org/docs/messages/module-not-found

the version of next.js has pretty high expectations for nodejs 😅 18.17.0
just to clarify, node 18 is needed only because of playground, not the library itself?

kennethaasan · 2024-02-29T16:47:16Z

Those sonar issues already exist, but I tried to fix them instead of ignoring them. There is one false positive which I added a NOSONAR comment on.
un-removed :)
I'll check tomorrow. I haven't had this issue, but will try with an empty repo 🤔
(and 5) Yes, Node v18 is only needed for the playground for now. This PR makes no changes to the library itself. I think having >= 18.17.0 is perfectly fine for contributors to this library.

kennethaasan · 2024-03-01T09:38:13Z

turns out lerna was also very outdated. We were on v3, while the newest is v8. I upgraded to v8 and migrated to npm workspaces for handling dependencies and linking as recommended by lerna: https://lerna.js.org/docs/getting-started#adding-lerna-to-an-existing-repo

btw, I un-deleted playground/bump-react-comp.sh, but I don't think it's needed in the playground. It seems to be a duplicate of the one in web-component?

@derberg, please check again :)

derberg · 2024-03-04T20:29:24Z

btw, I un-deleted playground/bump-react-comp.sh, but I don't think it's needed in the playground. It seems to be a duplicate of the one in web-component?

you are right. Since we did some fixes in playground to make it work with v3 we changed how react component is mentioned there, and it is no longer pointing to npm but with file reference to library dir

then you can remove the script and also all scripts from package.json files in playgroud and root that trigger it

also please bring back library/package-lock.json

kennethaasan · 2024-03-05T21:54:16Z

As agreed over Slack:

I brought back the install:reactcomp script in playground because I realized it was used to release the playground to github pages.

Regarding package-lock, I think we should be fine by only having one in the root. I think cache-dependency-path: '**/package-lock.json' in setup-node will be fine because it is used to pick up the lock file from the root, library, playground, and web-component. Now it will pick up the root one which contains lock information for all packages.
Please check https://docs.npmjs.com/cli/v10/using-npm/workspaces. I've used npm workspaces for some years now, and it works great. This is hard to test without merging, so we just have to do some hit-and-miss.

derberg · 2024-03-06T14:57:11Z

package.json

  "scripts": {
-    "bootstrap": "lerna bootstrap",
-    "clean": "lerna clean",


why no longer clean is not possible? it was pretty useful during development

derberg

npm start works like a charm now, but running build of playground gives

> build:playground
> cd playground && npm run build


> [email protected] build
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

./app/page.tsx:95:14
Type error: 'AsyncApi' cannot be used as a JSX component.
  Its type 'typeof AsyncApiComponent' is not a valid JSX element type.
    Types of construct signatures are incompatible.
      Type 'new (props: AsyncApiProps) => AsyncApiComponent' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
        Construct signature return types 'AsyncApiComponent' and 'Component<any, any, any>' are incompatible.
          The types of 'refs' are incompatible between these types.
            Type '{ [key: string]: React.ReactInstance; }' is not assignable to type '{ [key: string]: import("/Users/wookiee/sources/asyncapi-react/playground/node_modules/@types/react/index").ReactInstance; }'.
              'string' index signatures are incompatible.
                Type 'React.ReactInstance' is not assignable to type 'import("/Users/wookiee/sources/asyncapi-react/playground/node_modules/@types/react/index").ReactInstance'.
                  Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
                    Type 'React.Component<any, {}, any>' is not assignable to type 'import("/Users/wookiee/sources/asyncapi-react/playground/node_modules/@types/react/index").Component<any, {}, any>'.
                      The types returned by 'render()' are incompatible between these types.
                        Type 'React.ReactNode' is not assignable to type 'import("/Users/wookiee/sources/asyncapi-react/playground/node_modules/@types/react/index").ReactNode'.

  93 |           </CodeEditorsWrapper>
  94 |           <AsyncApiWrapper>
> 95 |             <AsyncApi schema={schema} config={parsedConfig} />
     |              ^
  96 |           </AsyncApiWrapper>
  97 |         </SplitWrapper>
  98 |       </PlaygroundWrapper>
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: [email protected] 
npm ERR!   at location: /Users/wookiee/sources/asyncapi-react/playground

derberg · 2024-03-06T15:53:02Z

@vishvamsinh28 in this case it is not a problem - this PR is basically refreshing from scratch the playground that is basically a development environment only, not "users" related. So in is an exception that as maintainer I'm willing to take 😄

actually is is almost ready to merge, just need @kennethaasan to confirm if he also has the same error as I have when running npm build:playground from root

kennethaasan · 2024-03-07T22:06:51Z

Yeah, I have the same error. The issue seems to be that we’re using different react versions in the library and playground. I’ll look into it next week.

kennethaasan · 2024-03-11T19:02:22Z

@derberg I had to add some @ts-ignore comments to fix these TS compiler errors. I tried many different things, but it's not easy to have a monorepo with different React versions in it... I can't get npm to work together with TS to provide the correct React version for each workspace project. I suggest we keep the @ts-ignore comments until we upgrade the library and web-component to React v18. I don't see any issues in the playground with these ignores.

derberg · 2024-03-13T10:49:49Z

web-component/package.json

@@ -39,8 +39,7 @@
  "scripts": {
    "start": "tsc --watch",
    "bundle": "webpack",
-    "prepare": "npm run bundle",


I'll bring it back, it is still needed in https://github.com/asyncapi/asyncapi-react/blob/master/package.json#L21

will commit directly to your branch to not bother you with tiny stuff

derberg · 2024-03-13T10:57:41Z

@kennethaasan all works good now, building work like a charm

last changes imho is https://github.com/asyncapi/asyncapi-react/blob/master/.github/workflows/release-wc-and-playground.yml#L89 because now, built playground ends up in playground/out

you either reconfigure workflow to point to different dir, or update next config to put build files in build folder

derberg · 2024-03-13T13:54:52Z

@kennethaasan after bringing back prepare script, we get tests failing as installation fails


npm info run @asyncapi/[email protected] prepare library npm run build:dev
npm info run @asyncapi/[email protected] prepare web-component npm run bundle
npm info run @asyncapi/[email protected] prepare { code: 1, signal: null }
npm info run @asyncapi/[email protected] prepare { code: 1, signal: null }
npm timing reify:rollback:createSparse Completed in 4572ms
npm timing reify:rollback:retireShallow Completed in 0ms
npm timing command:install Completed in 44346ms
npm verb stack Error: command failed
npm verb stack     at ChildProcess.<anonymous> (/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:63:27)
npm verb stack     at ChildProcess.emit (node:events:513:28)
npm verb stack     at maybeClose (node:internal/child_process:1100:16)
npm verb stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm verb pkgid @asyncapi/[email protected]
npm verb cwd /home/runner/work/asyncapi-react/asyncapi-react
npm verb Linux 6.5.0-1016-azure
npm verb node v16.20.2
npm verb npm  v8.19.4
npm ERR! code 1
npm ERR! path /home/runner/work/asyncapi-react/asyncapi-react/web-component
npm ERR! command failed
npm ERR! command sh -c -- npm run bundle
npm ERR! > @asyncapi/[email protected] bundle
npm ERR! > webpack
npm ERR! 
npm ERR! assets by status 212 KiB [cached] 3 assets
npm ERR! runtime modules 617 bytes 3 modules
npm ERR! orphan modules 3.44 KiB [orphan] 1 module
npm ERR! modules by path ../node_modules/ 300 KiB 60 modules
npm ERR! modules by path ./ 10.2 KiB
npm ERR!   ./src/index.ts + 1 modules 3.54 KiB [built] [code generated]
npm ERR!   ./node_modules/react/index.js 190 bytes [built] [code generated]
npm ERR!   ./node_modules/react/cjs/react.production.min.js 6.52 KiB [built] [code generated]
npm ERR! 
npm ERR! ERROR in ./src/AsyncApiWebComponent.tsx 29:0-58
npm ERR! Module not found: Error: Can't resolve '@asyncapi/react-component' in '/home/runner/work/asyncapi-react/asyncapi-react/web-component/src'
npm ERR!  @ ./src/index.ts 1:0-62 2:15-35
npm ERR! 
npm ERR! ERROR in /home/runner/work/asyncapi-react/asyncapi-react/web-component/src/AsyncApiWebComponent.tsx
npm ERR! ./src/AsyncApiWebComponent.tsx 7:7-34
npm ERR! [tsl] ERROR in /home/runner/work/asyncapi-react/asyncapi-react/web-component/src/AsyncApiWebComponent.tsx(7,8)
npm ERR!       TS2307: Cannot find module '@asyncapi/react-component' or its corresponding type declarations.
npm ERR!  @ ./src/index.ts 1:0-62 2:15-35
npm ERR! 
npm ERR! ERROR in /home/runner/work/asyncapi-react/asyncapi-react/web-component/src/AsyncApiWebComponent.tsx
npm ERR! ./src/AsyncApiWebComponent.tsx 34:21-27
npm ERR! [tsl] ERROR in /home/runner/work/asyncapi-react/asyncapi-react/web-component/src/AsyncApiWebComponent.tsx(34,22)
npm ERR!       TS2339: Property 'schema' does not exist on type 'AsyncApiWebComponentProps'.
npm ERR!  @ ./src/index.ts 1:0-62 2:15-35
npm ERR! 
npm ERR! 3 errors have detailed information that is not shown.
npm ERR! Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
npm ERR! 
npm ERR! webpack 5.88.2 compiled with 3 errors in 7436 ms
npm ERR! npm verb cli /opt/hostedtoolcache/node/16.20.2/x64/bin/node /opt/hostedtoolcache/node/16.20.2/x64/bin/npm
npm ERR! npm info using [email protected]
npm ERR! npm info using [email protected]
npm ERR! npm timing npm:load:whichnode Completed in 1ms
npm ERR! npm timing config:load:defaults Completed in 1ms
npm ERR! npm timing config:load:file:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/npmrc Completed in 1ms
npm ERR! npm timing config:load:builtin Completed in 1ms
npm ERR! npm timing config:load:cli Completed in 1ms
npm ERR! npm timing config:load:env Completed in 1ms
npm ERR! npm info found workspace root at /home/runner/work/asyncapi-react/asyncapi-react 
npm ERR! npm timing config:load:file:/home/runner/work/asyncapi-react/asyncapi-react/.npmrc Completed in 0ms
npm ERR! npm timing config:load:project Completed in 13ms
npm ERR! npm timing config:load:file:/home/runner/.npmrc Completed in 0ms
npm ERR! npm timing config:load:user Completed in 0ms
npm ERR! npm timing config:load:file:/opt/hostedtoolcache/node/16.20.2/x64/etc/npmrc Completed in 0ms
npm ERR! npm timing config:load:global Completed in 0ms
npm ERR! npm timing config:load:validate Completed in 1ms
npm ERR! npm timing config:load:credentials Completed in 1ms
npm ERR! npm timing config:load:setEnvs Completed in 0ms
npm ERR! npm timing config:load Completed in 19ms
npm ERR! npm timing npm:load:configload Completed in 19ms
npm ERR! npm timing npm:load:mkdirpcache Completed in 1ms
npm ERR! npm timing npm:load:mkdirplogs Completed in 0ms
npm ERR! npm verb title npm run bundle
npm ERR! npm verb argv "run" "bundle"
npm ERR! npm timing npm:load:setTitle Completed in 0ms
npm ERR! npm timing config:load:flatten Completed in 2ms
npm ERR! npm timing npm:load:display Completed in 5ms
npm ERR! npm verb logfile logs-max:10 dir:/home/runner/.npm/_logs
npm ERR! npm verb logfile /home/runner/.npm/_logs/2024-03-13T10_58_37_737Z-debug-0.log
npm ERR! npm timing npm:load:logFile Completed in 3ms
npm ERR! npm timing npm:load:timers Completed in 0ms
npm ERR! npm timing npm:load:configScope Completed in 0ms
npm ERR! npm timing npm:load Completed in 30ms
npm ERR! npm ERR! Lifecycle script `bundle` failed with error: 
npm ERR! npm ERR! Error: command failed 
npm ERR! npm ERR!   in workspace: @asyncapi/[email protected] 
npm ERR! npm ERR!   at location: /home/runner/work/asyncapi-react/asyncapi-react/web-component 
npm ERR! npm timing command:run Completed in 7965ms
npm ERR! npm verb exit 0
npm ERR! npm timing npm Completed in 8000ms
npm ERR! npm verb code 1
npm verb exit 1
npm timing npm Completed in 44707ms
npm verb unfinished npm timer reify 1710327485973
npm verb unfinished npm timer reify:build 1710327506066
npm verb unfinished npm timer build 1710327506071
npm verb unfinished npm timer build:links 1710327517408
npm verb unfinished npm timer build:run:prepare 1710327517408
npm verb unfinished npm timer build:run:prepare:library 1710327517409
npm verb unfinished npm timer build:run:prepare:web-component 1710327517459
npm verb code 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2024-03-13T10_58_05_616Z-debug-0.log
Error: Process completed with exit code 1.

is this why you removed it initially?

kennethaasan · 2024-03-13T19:43:20Z

Thanks for taking another look. I removed it from web-component because it's working by luck in the master branch. The web-component prepare script requires the prepare script in library to be completed to work, and when we changed from lerna to npm workspaces, that stopped working because of bad luck 😄

I fixed it by adding a bundle step in the release web-component job. I also removed bundle from the prepack script in web-component, because that's now done in that step I added.

I also changed the output folder for the playground to playground/out.

🤞 that everything is okay now

sonarqubecloud · 2024-03-14T15:30:56Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

derberg

Awesome!!!

Let's merge. With 91 files changed I'm pretty sure something will have to break during the release, I can't believe we remembered about everything 😄

derberg · 2024-03-14T16:49:26Z

/rtm

asyncapi-bot · 2024-03-14T19:02:02Z

🎉 This PR is included in version 1.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

asyncapi-bot · 2024-03-18T10:24:12Z

🎉 This issue has been resolved in version 1.4.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

kennethaasan added 3 commits February 29, 2024 10:14

feat: creates new playground with next.js

f58705a

feat: creates new playground with next.js

0bc27e3

feat: creates new playground with next.js

762d6ca

kennethaasan requested review from magicmatatjahu, derberg, fmvilas and asyncapi-bot-eve as code owners February 29, 2024 13:41

kennethaasan added 7 commits February 29, 2024 14:41

feat: creates new playground with next.js

35c0ec4

feat: creates new playground with next.js

2e5873a

feat: creates new playground with next.js

d4b48c7

Revert "feat: creates new playground with next.js"

0128d36

This reverts commit 2e5873a.

feat: creates new playground with next.js

d63f9ab

feat: creates new playground with next.js

9f09665

feat: creates new playground with next.js

a9db82b

fixes sonar

2151d45

kennethaasan added 5 commits February 29, 2024 17:47

un-remove script

fc5c876

upgrades lerna and adds npm workspaces

831ebb7

upgrades lerna and adds npm workspaces

5b78723

fixes styled components errors

0374801

fixes tests

4ab8371

kennethaasan mentioned this pull request Mar 1, 2024

update project dependencies #891

Open

adds install:reactcomp script in playground

a6e2b2a

derberg reviewed Mar 6, 2024

View reviewed changes

un-delete lerna clean script

1e4f26c

kennethaasan added 4 commits March 11, 2024 19:42

handle react v18

ea37dd1

handle react v18

3960136

fix sq

03fbf3d

Merge remote-tracking branch 'origin/master' into new-playground

6469938

derberg reviewed Mar 13, 2024

View reviewed changes

bring prepare back

39bfee6

Merge branch 'master' into new-playground

4ea89d3

fixes web-component bundle

060e804

kennethaasan added 3 commits March 14, 2024 09:07

Merge remote-tracking branch 'origin/master' into new-playground

43922de

Merge remote-tracking branch 'origin/master' into new-playground

df107ff

use package lock version 3

570a4f1

derberg reviewed Mar 14, 2024

View reviewed changes

asyncapi-bot added the ready-to-merge label Mar 14, 2024

derberg approved these changes Mar 14, 2024

View reviewed changes

asyncapi-bot merged commit 00cee65 into asyncapi:master Mar 14, 2024
10 checks passed

asyncapi-bot added the released label Mar 14, 2024

kennethaasan mentioned this pull request Mar 14, 2024

fix: fixes playground when deployed to github pages #949

Merged

kennethaasan deleted the new-playground branch March 15, 2024 08:48

This was referenced Apr 17, 2024

Workflows failing because of some leftovers scripts #888

Closed

fix: remove unnecessary playground scripts and update package.json #889

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: creates new playground with next.js #929

feat: creates new playground with next.js #929

kennethaasan commented Feb 29, 2024 •

edited

Loading

derberg commented Feb 29, 2024 •

edited

Loading

kennethaasan commented Feb 29, 2024

kennethaasan commented Mar 1, 2024

derberg commented Mar 4, 2024

kennethaasan commented Mar 5, 2024

derberg Mar 6, 2024

derberg left a comment

derberg commented Mar 6, 2024

kennethaasan commented Mar 7, 2024

kennethaasan commented Mar 11, 2024

derberg Mar 13, 2024

derberg commented Mar 13, 2024

derberg commented Mar 13, 2024

kennethaasan commented Mar 13, 2024

sonarqubecloud bot commented Mar 14, 2024

derberg left a comment

derberg commented Mar 14, 2024

asyncapi-bot commented Mar 14, 2024

asyncapi-bot commented Mar 18, 2024

feat: creates new playground with next.js #929

feat: creates new playground with next.js #929

Conversation

kennethaasan commented Feb 29, 2024 • edited Loading

derberg commented Feb 29, 2024 • edited Loading

kennethaasan commented Feb 29, 2024

kennethaasan commented Mar 1, 2024

derberg commented Mar 4, 2024

kennethaasan commented Mar 5, 2024

derberg Mar 6, 2024

Choose a reason for hiding this comment

derberg left a comment

Choose a reason for hiding this comment

derberg commented Mar 6, 2024

kennethaasan commented Mar 7, 2024

kennethaasan commented Mar 11, 2024

derberg Mar 13, 2024

Choose a reason for hiding this comment

derberg commented Mar 13, 2024

derberg commented Mar 13, 2024

kennethaasan commented Mar 13, 2024

sonarqubecloud bot commented Mar 14, 2024

Quality Gate passed

derberg left a comment

Choose a reason for hiding this comment

derberg commented Mar 14, 2024

asyncapi-bot commented Mar 14, 2024

asyncapi-bot commented Mar 18, 2024

kennethaasan commented Feb 29, 2024 •

edited

Loading

derberg commented Feb 29, 2024 •

edited

Loading