p5-wrapper / next Goto Github PK

A NextJS specific library for the @P5-Wrapper/react project.

License: MIT License

TypeScript 100.00%

javascript react typescript component animation creative-coding graphics-programming nextjs p5 sketches

next's Introduction

@P5-wrapper/next

Note:

This library simply re-exports the @P5-wrapper/react (react-p5-wrapper) component as a NextJS dynamic component. Nothing more.

For more in-depth information on the base component, check the documentation via the @P5-wrapper/react (react-p5-wrapper) docs.

Installation

To install the component, run the following:

[npm|yarn|pnpm] [install|add] @p5-wrapper/next @p5-wrapper/react

Usage

Then to use the component in your NextJS project you can simply import like so:

import React from "react";
import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

const sketch: Sketch = (p5) => {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export default function Page() {
  return <NextReactP5Wrapper sketch={sketch} />;
}

next's People

Contributors

Stargazers

Watchers

Forkers

yevdyko imadi-arch

next's Issues

CI and CD pipelines are broken since Dependabot migration

CI and CD fail after move to dependabot. Please check the actions tab and try to fix the pipelines.

window is not defined & p5.loadSound is not a function

Hello, I'm having the two errors below in NextJS version 14, could anyone please check and let me know if I'm doing any mistake?

Error: window is not defined
TypeError: p5.loadSound is not a function

P5 Sketch Component

"use client"

import React from "react";
import * as p5 from "p5";
import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

(window as any).p5 = p5;
import("p5/lib/addons/p5.sound");

const sketch: Sketch = p5 => {
  let song: p5.SoundFile;
  let button: p5.Element;

  p5.setup = () => {
    p5.createCanvas(600, 400, p5.WEBGL);
    p5.background(255, 0, 0);
    button = p5.createButton("Toggle audio");

    button.mousePressed(() => {
      if (!song) {
        const songPath = "/piano.mp3";
        song = p5.loadSound(
          songPath,
          () => {
            song.play();
          },
          () => {
            console.error(
              `Could not load the requested sound file ${songPath}`
            );
          }
        );
        return;
      }

      if (!song.isPlaying()) {
        song.play();
        return;
      }

      song.pause();
    });
  };

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export default function SketchP5() {
  return <NextReactP5Wrapper sketch={sketch} />;
}

Main file, where I'm loading component:

import React from "react";

const SketchP5 = React.lazy(() => import("@/components/sections/SketchP5"));

export default function Home() {
	return (
		<main className="flex min-h-screen flex-col items-center justify-between p-24">
			<React.Suspense fallback={<div>Loading...</div>}>
				<SketchP5 />
			</React.Suspense>
		</main>
	);
}

unexpected array behavior inside p5 sketch function

I run into an issue when porting a cellular automaton I coded in standard p5.js to a Next.js project. I managed to isolate the bug that I suppose is responsible for the code not working. Here's the isolated issue:

My files

The contents of index.js

import Head from 'next/head'
import Issue from '@/components/p5/Issue'

export default function Home() {
  return (
    <>
      <Head>
        <title>++test++</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <div className='w-screen h-screen relative'>
        <Issue />
      </div>
    </>
  )
}

The contents of issue.jsx

import React from "react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

const sketch = p5 => {
    let board
    let size = 10
    p5.setup = () => {
        p5.createCanvas(200, 200)
        board = new Array(size);
        for (let i = 0; i < size; i++) {
            board[i] = new Array(size);
        }
        cokurwa()
    }
    const cokurwa = () => {
        console.log('before for:', board)
        console.log('before for:', board[1][0])
        for (let i = 0; i < board.length; i++) {
            board[i][0] = i;
        }
        console.log('after for:', board)
        console.log('after for:', board[1][0])
        console.log('==================')
    }
}

const Issue = () => {
    return (
        <NextReactP5Wrapper sketch={sketch} />
    )
}

export default Issue

Expected Behavior

the sketch function is executed once
console.log('before for:', board) in cokurwa() outputs a 2d array where each element is undefined
console.log('before for:', board[1][0]) in cokurwa() outputs undefined

Actual Behavior

the sketch function is executed two times, instead of one
console.log('before for:', board) seems to output contents of board after the for loop has executed
console.log('before for:', board[1][0]) outputs undefined like it logically should

Steps to Reproduce the Problem

Paste the code I attached in the "My files" section to a create-next-app setup

Specifications

Package Version: "@p5-wrapper/next": "^0.2.0"

There are types at 'c:/****/node_modules/@p5-wrapper/next/dist/main.d.ts', but this result could not be resolved when respecting package.json "exports". The '@p5-wrapper/next' library may need to update its package.json or typings.ts

Could not find a declaration file for module '@p5-wrapper/next'. 'c://node_modules/@p5-wrapper/next/dist/next.js' implicitly has an 'any' type.
There are types at 'c://node_modules/@p5-wrapper/next/dist/main.d.ts', but this result could not be resolved when respecting package.json "exports". The '@p5-wrapper/next' library may need to update its package.json or typings.ts(7016)

i use typescript, how solved it?

Sketch renders twice when using app router

Expected Behavior

Sketch elements only contains one canvas

Actual Behavior

Sketch contains two? No clue why, but even in the most basic case when using the latest next.js, you get two sketches rendering.

The actual component renders it twice.

I've tried using p5-wrapper directly, with the same outcome.

Steps to Reproduce the Problem

Create a new next js app, using app router.
Add the snippet as is described.
Get two sketches.

I've made a minimal reproduction. Notice how this happens in app router, but not page router.

Archive.zip

Specifications

Package Version: 0.2.0

Failed loading p5 wrapper

Expected Behavior

p5.js canvas can be inserted into page

Actual Behavior

Wrapper failed to load, throwing the error:

./node_modules/@p5-wrapper/react/dist/component/react.js
Module parse failed: Identifier 'je' has already been declared (7762:41)
|                                 if (F ? k || ($ = !0, A(), k = !0) : $ = !!je.first, H = Math.max(0, Math.floor(H)), Q = Math.max(0, Math.floor(Q)), $) {
|                                     if (!re) throw new Error("First frame must include a { palette } option");
>                                     var [je, we, fe, De, he = 8] = [
|                                         G,
|                                         H,
 
Import trace for requested module:
[./node_modules/@p5-wrapper/react/dist/component/react.js](mailto:./node_modules/@p5-wrapper/react/dist/component/react.js)
[./node_modules/@p5-wrapper/next/dist/next.js](mailto:./node_modules/@p5-wrapper/next/dist/next.js)
./components/Canvas.tsx
./app/page.tsx

Steps to Reproduce the Problem

Install @p5-wrapper/next
Include <NextReactP5Wrapper /> component into page

Specifications

Package Version: 1.0.2
Next Version: 14.1.0

Using Plugins in latest versions of Next.js

Have followed the steps in the @p5-wrapper/react documentation. However getting stuck at the top level await step. As that's not supported in the latest versions of nextjs using swc (instead of webpack)

Is there a way you can suggest I can import the sound plugin without top level await and get it to work.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

Update dependency @types/node to v20.8.9
Update dependency rimraf to v5.0.5
Update react monorepo (@types/react, @types/react-dom)
Update dependency @vitejs/plugin-react to v4.1.0
Update dependency typescript to v5.2.2
Update dependency vite to v4.5.0
Update dependency vite-plugin-dts to v3.6.2

Detected dependencies

github-actions

.github/workflows/CD.yml

P5-wrapper/setup-action v1.0.6

P5-wrapper/setup-action v1.0.6

JS-DevTools/npm-publish v3

.github/workflows/CI.yml

P5-wrapper/setup-action v1.0.6

stefanzweifel/git-auto-commit-action v5.0.0

P5-wrapper/setup-action v1.0.6

stefanzweifel/git-auto-commit-action v5

P5-wrapper/setup-action v1.0.6

stefanzweifel/git-auto-commit-action v5

P5-wrapper/setup-action v1.0.6

P5-wrapper/setup-action v1.0.6

.github/workflows/CODEQL.yml

actions/checkout v4

github/codeql-action v2

github/codeql-action v2

npm

package.json

next ^13.3.4

react ^18.2.0

react-dom ^18.2.0

@types/node ^20.0.0

@types/react ^18.2.0

@types/react-dom ^18.2.1

@vitejs/plugin-react ^4.0.0

rimraf ^5.0.0

typescript ^5.0.4

vite ^4.3.4

vite-plugin-dts ^3.0.0

@p5-wrapper/react >= 4.2.0

next >= 12.3.4

react >= 18.2.0

react-dom >= 18.2.0

Check this box to trigger a request for Renovate to run again on this repository

p5-wrapper / next Goto Github PK

next's Introduction

@P5-wrapper/next

Installation

Usage

next's People

Contributors

Stargazers

Watchers

Forkers

next's Issues

My files

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Other Branches

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org