viewer-vivid-2D

Description

This repository contains all file and configs for npm viewer-vivid-2D package.

Working

If need to and/delete/modify something in the npm viewer-vivid-2D package here is intruction how you can do it.

Base directory for the package is lib. Lib contains all files that will transpilet into npm package. Vite will transpile the code inside lib to the dist folder. So if you need to do some changes, you will work with this folder.

important don't delete/rename the main.ts file inside the lib folder. All configs in this App watch on this file and without this file customer won't be able to import the PlayerContainer component

important don't delete inside the lib folder vite-env.d.ts because you'll catch a lot of errors at the build time

How to use

If you need to do something, you need to work with the lib folder. But it's not enough just make some changes to add them to the package. After making changes you need to run the command npm run build in your terminal, after this you can see a new folder dist where you can find all your transplanted files.

Testing changes

Before publishing the npm package, I recommend you to test changes locally. In App.tsx you can find next code:

// Import file from the /dist directory for testing builded file
// import { PlayerContainer } from "../dist/components" 

// Import file from the /lib directory for testing changes
import { PlayerContainer } from "../lib/main"

function App() {
  return (
    <PlayerContainer  idProject="15" idProduct="31"/>
  )
}

export default App

As you can see here we have a few imports our main PlayerContainer component:

• if want to check all your changes before build, you don't need to do anything just start npm run dev;
• if want to check all your changes after build, you need to uncomment the first import and start npm run dev;

For using this player you need to import

PlayerContainer and put to required props:

• idProject as default you can use 15;
• idProduct as default you can use 31;