textmode.js 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +39 -9
  2. package/dist/textmode.esm.js +1181 -742
  3. package/dist/textmode.esm.min.js +1287 -848
  4. package/dist/textmode.umd.js +14 -14
  5. package/dist/textmode.umd.min.js +14 -14
  6. package/dist/types/export/base/FileHandler.d.ts +1 -15
  7. package/dist/types/export/image/ImageDataExtractor.d.ts +3 -2
  8. package/dist/types/export/image/ImageExporter.d.ts +7 -6
  9. package/dist/types/export/image/ImageFileHandler.d.ts +0 -6
  10. package/dist/types/export/image/index.d.ts +1 -1
  11. package/dist/types/export/image/types.d.ts +2 -4
  12. package/dist/types/export/svg/SVGFileHandler.d.ts +0 -18
  13. package/dist/types/export/txt/TXTFileHandler.d.ts +0 -5
  14. package/dist/types/index.d.ts +1 -0
  15. package/dist/types/rendering/index.d.ts +4 -0
  16. package/dist/types/rendering/webgl/Framebuffer.d.ts +1 -1
  17. package/dist/types/rendering/webgl/Renderer.d.ts +63 -21
  18. package/dist/types/rendering/webgl/Shader.d.ts +12 -0
  19. package/dist/types/rendering/webgl/geometries/Line.d.ts +31 -0
  20. package/dist/types/rendering/webgl/geometries/Rectangle.d.ts +8 -14
  21. package/dist/types/rendering/webgl/shapes/LineShape.d.ts +20 -0
  22. package/dist/types/rendering/webgl/shapes/RectangleShape.d.ts +20 -0
  23. package/dist/types/rendering/webgl/shapes/Shape.d.ts +21 -0
  24. package/dist/types/textmode/ConversionPipeline.d.ts +9 -10
  25. package/dist/types/textmode/Textmodifier.d.ts +267 -3
  26. package/dist/types/textmode/font/TextmodeFont.d.ts +1 -1
  27. package/package.json +1 -1
  28. package/dist/types/rendering/webgl/primitives/SolidRectangle.d.ts +0 -1
  29. package/dist/types/textmode/font/typr/Typr.min.d.ts +0 -19
package/README.md CHANGED
@@ -37,6 +37,25 @@ To get started with `textmode.js`, you'll need:
37
37
 
38
38
  ### Importing `textmode.js`
39
39
 
40
+ `textmode.js` is available in multiple bundle variants to suit different project needs:
41
+
42
+ | Bundle type | File size | Font included? | Best for |
43
+ |-------------|-----------|---------------|----------|
44
+ | **Standard UMD**<br/> (`textmode.umd.js`) | ~117kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
45
+ | **Standard ESM**<br/> (`textmode.esm.js`) | ~183kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
46
+ | **Minified UMD**<br/> (`textmode.umd.min.js`) | ~71kB | ❌ Requires external font | Production apps, custom fonts |
47
+ | **Minified ESM**<br/> (`textmode.esm.min.js`) | ~136kB | ❌ Requires external font | Production apps, custom fonts |
48
+
49
+ **Choose Standard bundles for:**
50
+ - The simplest setup with no additional configuration
51
+ - Everything embedded and ready to use
52
+ - Getting started without worrying about fonts
53
+
54
+ **Choose Minified bundles for:**
55
+ - Bundle size optimization *(25-40% smaller)*
56
+ - Custom fonts instead of the default
57
+ - Production applications requiring maximum performance
58
+
40
59
  #### UMD
41
60
 
42
61
  To use `textmode.js` in a UMD environment, download the latest `umd` build from the [**GitHub releases page**](https://github.com/humanbydefinition/textmode.js/releases/) or import it directly from a CDN like [**jsDelivr**](https://www.jsdelivr.com/package/npm/textmode.js). The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:
@@ -47,8 +66,11 @@ To use `textmode.js` in a UMD environment, download the latest `umd` build from
47
66
  <head>
48
67
  <title>textmode.js example</title>
49
68
 
50
- <!-- Import textmode.js from jsDelivr CDN -->
69
+ <!-- Standard bundle (with embedded UrsaFont) -->
51
70
  <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
71
+
72
+ <!-- OR Minified bundle (requires external font) -->
73
+ <!-- <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.min.js"></script> -->
52
74
  </head>
53
75
  <body>
54
76
  <canvas id="myCanvas" width="800" height="600"></canvas>
@@ -57,8 +79,13 @@ To use `textmode.js` in a UMD environment, download the latest `umd` build from
57
79
  // Reference your existing canvas element
58
80
  const canvas = document.querySelector('canvas#myCanvas');
59
81
 
60
- // Create a `textmodifier` instance to apply textmode conversion to a given canvas
82
+ // Standard bundle - no font configuration needed
61
83
  const textmodifier = await textmode.create(canvas);
84
+
85
+ // Minified bundle - font required
86
+ // const textmodifier = await textmode.create(canvas, {
87
+ // fontSource: './path/to/your/font.ttf'
88
+ // });
62
89
  })();
63
90
  </script>
64
91
  </body>
@@ -76,20 +103,23 @@ npm install textmode.js
76
103
  Then, you can import it in your JavaScript or TypeScript files:
77
104
 
78
105
  ```javascript
106
+ // Standard bundle (with embedded UrsaFont)
79
107
  import { textmode } from 'textmode.js';
80
108
 
109
+ // OR Minified bundle (requires external font)
110
+ // import { textmode } from 'textmode.js/min';
111
+
81
112
  (async () => {
82
113
  // Canvas example
83
114
  const canvas = document.querySelector('canvas#myCanvas');
115
+
116
+ // Standard bundle - no font configuration needed
84
117
  const textmodifier = await textmode.create(canvas);
85
118
 
86
- // Video example
87
- const video = document.querySelector('video#myVideo');
88
- if (video) {
89
- const videoTextmodifier = await textmode.create(video);
90
- // ASCII conversion will update automatically as video plays
91
- video.play();
92
- }
119
+ // Minified bundle - font required
120
+ // const textmodifier = await textmode.create(canvas, {
121
+ // fontSource: './path/to/your/font.ttf'
122
+ // });
93
123
  })();
94
124
  ```
95
125