asyncapi-react feat: creates new playground with next.js

Description

Changes proposed in this pull request:

creates new playground with next.js
upgrades typescript

Related issue(s)

Partly fixes #891

Feb 29 '24 13:02 kennethaasan

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?

Feb 29 '24 16:02 derberg

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.

Feb 29 '24 16:02 kennethaasan

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 :)

Mar 01 '24 09:03 kennethaasan

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

Mar 04 '24 20:03 derberg

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.

Mar 05 '24 21:03 kennethaasan

Yo, I'm sharing my thoughts on this. Since there are lots of files/lines changed, it will be hard for the maintainer to review and test the code. I have a suggestion to make incremental changes. Since we are migrating, we can follow the approach we're currently using with the website repo: create another branch other than master to merge migration changes.

Wdyt ? @kennethaasan @derberg

Mar 06 '24 15:03 vishvamsinh28

@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

Mar 06 '24 15:03 derberg

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.

Mar 07 '24 22:03 kennethaasan

@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.

Mar 11 '24 19:03 kennethaasan

@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

Mar 13 '24 10:03 derberg

@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?

Mar 13 '24 13:03 derberg

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

Mar 13 '24 19:03 kennethaasan