Skip to content

Commit cff7cb1

Browse files
Danielku15Danielku15
authored
feat: Add next.js example (#2)
1 parent 0de3570 commit cff7cb1

File tree

13 files changed

+2040
-6
lines changed

13 files changed

+2040
-6
lines changed

‎src/webpack-angular/package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/webpack-angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@angular/platform-browser": "^17.2.0",
1919
"@angular/platform-browser-dynamic": "^17.2.0",
2020
"@angular/router": "^17.2.0",
21-
"@coderline/alphatab": "^1.3.0-alpha.1006",
21+
"@coderline/alphatab": "^1.3.1",
2222
"rxjs": "~7.8.0",
2323
"tslib": "^2.3.0",
2424
"zone.js": "~0.14.3"

‎src/webpack-nextjs/.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/public/alphatab
2+
3+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
4+
5+
# dependencies
6+
/node_modules
7+
/.pnp
8+
.pnp.js
9+
.yarn/install-state.gz
10+
11+
# testing
12+
/coverage
13+
14+
# next.js
15+
/.next/
16+
/out/
17+
18+
# production
19+
/build
20+
21+
# misc
22+
.DS_Store
23+
*.pem
24+
25+
# debug
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log*
29+
30+
# local env files
31+
.env*.local
32+
33+
# vercel
34+
.vercel
35+
36+
# typescript
37+
*.tsbuildinfo
38+
next-env.d.ts

‎src/webpack-nextjs/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Next.js Example (Without WebPack Plugin)
2+
3+
Until we have official support for next.js the integration of alphaTab into next.js applications have to be in quite a old-fashioned way:
4+
5+
We include alphaTab as plain javascript asset file and let next.js load this file instead of using webpack dependency management.
6+
This way we can include alphaTab in a raw-fashion so that WebWorkers and AudioWorklets work.
7+
8+
https://github.com/orgs/CoderLine/projects/12?pane=issue&itemId=65623529
9+
10+
11+
## What's special in this project
12+
13+
### next.config.mjs
14+
15+
In there we setup the WebPack CopyPlugin to copy the alphaTab files:
16+
17+
* the UMD alphaTab.min.js for registering alphaTab as a global.
18+
* the font directory containing the music notation glyph font.
19+
* the soundfont directory containing the SF2 files for audio playback.
20+
21+
Additionally we tell WebPack to "load" alphaTab from the global variable (e.g. globalThis.alphaTab).
22+
This global variable will be added by adding a `script` tag for the plain `alphaTab.min.js`.
23+
24+
### src/alphaTab.ts
25+
26+
This file hides away the complexity of dynamically loading alphaTab and prevents that alphaTab is used directly and not via dynamically loaded script tag.
27+
28+
It uses the [`<Script />`](https://nextjs.org/docs/pages/api-reference/components/script) component to load alphaTab and provides a callback to when it is loaded.
29+
30+
### page.tsx
31+
32+
Here we use alphaTab through the specialized loader.

‎src/webpack-nextjs/next.config.mjs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { AlphaTabWebPackPlugin } from '@coderline/alphatab/webpack'
2+
3+
/** @type {import('next').NextConfig} */
4+
const nextConfig = {
5+
webpack(config) {
6+
config.plugins.push(
7+
new AlphaTabWebPackPlugin()
8+
);
9+
return config;
10+
},
11+
};
12+
13+
export default nextConfig;

0 commit comments

Comments
 (0)