p5-wrapper / next Goto Github PK

View Code? Open in Web Editor NEW

12.0 1.0 1.0 141 KB

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 People

Contributors

Stargazers

Forkers

yevdyko

next's Issues

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

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"

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

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.

p5-wrapper / next Goto Github PK

next's People

Contributors

Stargazers

Forkers

next's Issues

Other Branches

Detected dependencies

My files

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Recommend Projects

Recommend Topics

Recommend Org