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.

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

chore(playground): add playground #2663

Merged
merged 13 commits into from
Apr 7, 2022
Merged

chore(playground): add playground #2663

merged 13 commits into from
Apr 7, 2022

Conversation

kentcdodds
Copy link
Member

Closes: https://linear.app/remix-run/issue/REM-959/work-on-remix-repo-playground

  • Docs
    - [ ] Tests

Check the updates to Contributing.md for details

Copy link
Collaborator

@machour machour left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome idea Kent!

Just commented on a tiny itsy bitsy thing

docs/pages/contributing.md Show resolved Hide resolved
@ryanflorence
Copy link
Member

This looks fantastic.

I got this on my first attempt:

❯ yarn playground:new
yarn run v1.22.17
$ node ./scripts/playground/new.js
ℹ️  Using default template. If you want to customize it, make a project in ./scripts/playground/template.local and we'll use that one instead.
📥  Installing deps...
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.

added 745 packages, and audited 746 packages in 6s

174 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🚚  Copying remix deps...
🎬  Running Remix Init...
sh: /Users/ryan/remix-run/remix-prs/playground/playground-1649256654749/node_modules/.bin/remix: Permission denied
node:child_process:826
    err = new Error(msg);
          ^

Error: Command failed: npx remix init
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at createNewProject (/Users/ryan/remix-run/remix-prs/scripts/playground/new.js:53:5) {
  status: 126,
  signal: null,
  output: [ null, null, null ],
  pid: 40353,
  stdout: null,
  stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@kentcdodds
Copy link
Member Author

I've fixed it!

~/Desktop 👻
$ git clone remix-run/remix
cd Cloning into 'remix'...
./remixremote: Enumerating objects: 38083, done.
remote: Counting objects: 100% (837/837), done.
remote: Compressing objects: 100% (568/568), done.
Receiving objects:   0% (1/38083)
remote: Total 38083 (delta 493), reused 484 (delta 258), pack-reused 37246
Receiving objects: 100% (38083/38083), 20.32 MiB | 16.23 MiB/s, done.
Resolving deltas: 100% (28587/28587), done.
h%                                                                                                                                                                                 ~/Desktop 👻
$ cd ./remix
~/Desktop/remix (main) 👻
$ git checkout playground
Branch 'playground' set up to track remote branch 'playground' from 'origin' by rebasing.
Switched to a new branch 'playground'
~/Desktop/remix (playground) 👻
$ yarn 
yarn install v1.22.17
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > @octokit/plugin-paginate-rest@2.17.0" has unmet peer dependency "@octokit/core@>=2".
warning " > @testing-library/cypress@8.0.2" has unmet peer dependency "cypress@^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > @remix-run/cloudflare@1.3.4" has unmet peer dependency "@cloudflare/workers-types@^2.0.0 || ^3.0.0".
warning " > @remix-run/cloudflare-pages@1.3.4" has unmet peer dependency "@cloudflare/workers-types@^3.0.0".
warning " > @remix-run/cloudflare-workers@1.3.4" has unmet peer dependency "@cloudflare/workers-types@^2.0.0 || ^3.0.0".
warning " > @remix-run/netlify@1.3.4" has unmet peer dependency "@netlify/functions@^0.10.0".
warning " > @remix-run/vercel@1.3.4" has unmet peer dependency "@vercel/node@^1.8.3".
[5/5] 🔨  Building fresh packages...
✨  Done in 7.91s.
~/Desktop/remix (playground) 👻
$ yarn playground:new cookies
yarn run v1.22.17
$ node ./scripts/playground/new.js cookies
ℹ️  Using default template. If you want to customize it, make a project in ./scripts/playground/template.local and we'll use that one instead.
📥  Installing deps...
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.

added 745 packages, and audited 746 packages in 6s

174 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🏗  Building remix...
$ /Users/kentcdodds/Desktop/remix/node_modules/.bin/rollup -c

packages/create-remix/cli.ts → build/node_modules/create-remix...
created build/node_modules/create-remix in 163ms

packages/remix/index.ts → build/node_modules/remix...
created build/node_modules/remix in 12ms

packages/remix/index.ts → build/node_modules/remix/esm...
created build/node_modules/remix/esm in 7ms

packages/remix-dev/index.ts → build/node_modules/@remix-run/dev...
created build/node_modules/@remix-run/dev in 515ms

packages/remix-dev/cli.ts → build/node_modules/@remix-run/dev...
created build/node_modules/@remix-run/dev in 17ms

packages/remix-dev/cli/migrate/migrations/transforms.ts → build/node_modules/@remix-run/dev/cli/migrate/migrations...
(!) Mixing named and default exports
https://rollupjs.org/guide/en/#outputexports
The following entry modules are using named and default exports together:
packages/remix-dev/cli/migrate/migrations/replace-remix-imports/transform/index.ts

Consumers of your bundle will have to use chunk['default'] to access their default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning
created build/node_modules/@remix-run/dev/cli/migrate/migrations in 39ms

packages/remix-dev/server-build.ts → build/node_modules/@remix-run/dev...
created build/node_modules/@remix-run/dev in 18ms

packages/remix-server-runtime/index.ts → build/node_modules/@remix-run/server-runtime...
created build/node_modules/@remix-run/server-runtime in 105ms

packages/remix-server-runtime/index.ts → build/node_modules/@remix-run/server-runtime/esm...
created build/node_modules/@remix-run/server-runtime/esm in 92ms

packages/remix-server-runtime/magicExports/remix.ts → build/node_modules/@remix-run/server-runtime/magicExports...
created build/node_modules/@remix-run/server-runtime/magicExports in 4ms

packages/remix-server-runtime/magicExports/remix.ts → build/node_modules/@remix-run/server-runtime/magicExports/esm...
created build/node_modules/@remix-run/server-runtime/magicExports/esm in 3ms

packages/remix-node/index.ts → build/node_modules/@remix-run/node...
created build/node_modules/@remix-run/node in 70ms

packages/remix-node/magicExports/remix.ts → build/node_modules/@remix-run/node/magicExports...
created build/node_modules/@remix-run/node/magicExports in 4ms

packages/remix-node/magicExports/remix.ts → build/node_modules/@remix-run/node/magicExports/esm...
created build/node_modules/@remix-run/node/magicExports/esm in 4ms

packages/remix-cloudflare/index.ts → build/node_modules/@remix-run/cloudflare...
created build/node_modules/@remix-run/cloudflare in 22ms

packages/remix-cloudflare/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare/magicExports/esm...
created build/node_modules/@remix-run/cloudflare/magicExports/esm in 3ms

packages/remix-cloudflare/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare/magicExports...
created build/node_modules/@remix-run/cloudflare/magicExports in 4ms

packages/remix-cloudflare-pages/index.ts → build/node_modules/@remix-run/cloudflare-pages/esm...
created build/node_modules/@remix-run/cloudflare-pages/esm in 10ms

packages/remix-cloudflare-workers/index.ts → build/node_modules/@remix-run/cloudflare-workers/esm...
created build/node_modules/@remix-run/cloudflare-workers/esm in 11ms

packages/remix-architect/index.ts → build/node_modules/@remix-run/architect...
created build/node_modules/@remix-run/architect in 25ms

packages/remix-architect/magicExports/remix.ts → build/node_modules/@remix-run/architect/magicExports...
created build/node_modules/@remix-run/architect/magicExports in 3ms

packages/remix-architect/magicExports/remix.ts → build/node_modules/@remix-run/architect/magicExports/esm...
created build/node_modules/@remix-run/architect/magicExports/esm in 3ms

packages/remix-cloudflare-pages/index.ts → build/node_modules/@remix-run/cloudflare-pages...
created build/node_modules/@remix-run/cloudflare-pages in 14ms

packages/remix-cloudflare-pages/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare-pages/magicExports...
created build/node_modules/@remix-run/cloudflare-pages/magicExports in 3ms

packages/remix-cloudflare-pages/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare-pages/magicExports/esm...
created build/node_modules/@remix-run/cloudflare-pages/magicExports/esm in 3ms

packages/remix-cloudflare-workers/index.ts → build/node_modules/@remix-run/cloudflare-workers...
created build/node_modules/@remix-run/cloudflare-workers in 11ms

packages/remix-cloudflare-workers/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare-workers/magicExports...
created build/node_modules/@remix-run/cloudflare-workers/magicExports in 5ms

packages/remix-cloudflare-workers/magicExports/remix.ts → build/node_modules/@remix-run/cloudflare-workers/magicExports/esm...
created build/node_modules/@remix-run/cloudflare-workers/magicExports/esm in 3ms

packages/remix-express/index.ts → build/node_modules/@remix-run/express...
created build/node_modules/@remix-run/express in 14ms

packages/remix-netlify/index.ts → build/node_modules/@remix-run/netlify...
created build/node_modules/@remix-run/netlify in 21ms

packages/remix-vercel/index.ts → build/node_modules/@remix-run/vercel...
created build/node_modules/@remix-run/vercel in 16ms

packages/remix-react/index.tsx → build/node_modules/@remix-run/react...
created build/node_modules/@remix-run/react in 354ms

packages/remix-react/index.tsx → build/node_modules/@remix-run/react/esm...
created build/node_modules/@remix-run/react/esm in 255ms

packages/remix-react/magicExports/remix.ts → build/node_modules/@remix-run/react/magicExports...
created build/node_modules/@remix-run/react/magicExports in 3ms

packages/remix-react/magicExports/remix.ts → build/node_modules/@remix-run/react/magicExports/esm...
created build/node_modules/@remix-run/react/magicExports/esm in 3ms

packages/remix-serve/index.ts, packages/remix-serve/env.ts → build/node_modules/@remix-run/serve...
created build/node_modules/@remix-run/serve in 10ms

packages/remix-serve/cli.ts → build/node_modules/@remix-run/serve...
created build/node_modules/@remix-run/serve in 6ms
🚚  Copying remix deps...
🎬  Running Remix Init...

> build
> run-s build:*


> build:css
> npm run generate:css -- --minify


> generate:css
> tailwindcss -o ./app/styles/tailwind.css "--minify"


Done in 119ms.

> build:remix
> node ./node_modules/@remix-run/dev/cli build

Building Remix app in production mode...
Built in 166ms

> setup
> prisma migrate dev

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "data.db" at "file:./data.db?connection_limit=1"

SQLite database data.db created at file:./data.db?connection_limit=1

Applying migration `20220307190657_init`

The following migration(s) have been applied:

migrations/
  └─ 20220307190657_init/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (3.12.0 | library) to ./node_modules/@prisma/client in 257ms


Running seed command `ts-node --require tsconfig-paths/register prisma/seed.ts` ...
Database has been seeded. 🌱

🌱  The seed command has been executed.


Setup is complete. You're now ready to rock and roll 🤘

Start development with `npm run dev`
✅  Done! Now in one terminal run `yarn watch` in the root of the remix repo and in another cd into ./playground/cookies and run `npm run dev` and you should be set.
✨  Done in 13.46s.
~/Desktop/remix (playground) 👻
$ 

@kentcdodds
Copy link
Member Author

kentcdodds commented Apr 6, 2022

Confusingly the bug-report integration test failed on this one 🤔 Going to kick it off again and hopefully it fails again. Much happier with something that fails consistently than passes inconsistently 😅

EDIT: It passed... well that's unfortunate 😬 Hopefully Logan's changes to playwright magically make our tests more reliable.

@ryanflorence
Copy link
Member

Awesome, it's working! I love the rebuild when you change both the playground app and the remix source. It's perfect.

Live reload is busted though, I get this in the browser

Uncaught ReferenceError: port is not defined
    at (index):25:46
    at (index):45:5

Copy link
Member

@MichaelDeBoey MichaelDeBoey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like we're using indie-stack (?) as the template here.

Having it inline is nice as we don't have to download it from upstream.
On the other hand we're missing on all latest changes that are happening over there and could be useful to have here too.
Just wanted to bring it to your attention that it can cause extra maintenance work.

scripts/playground/template/package-lock.json Outdated Show resolved Hide resolved
scripts/playground/template/.env Outdated Show resolved Hide resolved
@kentcdodds
Copy link
Member Author

This isn't exactly the same as the indie stack. The express server has an important difference.

@kentcdodds
Copy link
Member Author

@ryanflorence that was a bug in remix. This has been fixed. I updated this branch with dev and it should be ready to go.

@ryanflorence ryanflorence force-pushed the playground branch 2 times, most recently from 1393fcc to 17fac4d Compare April 7, 2022 02:04
@ryanflorence ryanflorence merged commit e7b7c40 into dev Apr 7, 2022
@ryanflorence ryanflorence deleted the playground branch April 7, 2022 02:05
@github-actions
Copy link
Contributor

github-actions bot commented Apr 7, 2022

🤖 Hello there,

We just published version v1.3.5-pre.4 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions
Copy link
Contributor

github-actions bot commented Apr 7, 2022

🤖 Hello there,

We just published version v1.3.5 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants