From 82b42ffc50b860d4c3ec30bc230099b5699ba197 Mon Sep 17 00:00:00 2001 From: Matt Boldt Date: Sat, 25 Mar 2023 22:11:12 -0500 Subject: [PATCH] Fix type declaration and bump version --- README.md | 4 +- dist/typed.module.js | 2 +- dist/typed.module.js.map | 2 +- docs/index.html | 2 +- docs/index.json | 4 +- index.d.ts | 126 ++++++++++++++++++++++++++++++++++++- index.html | 13 ++-- package-lock.json | 4 +- package.json | 2 +- typed.d.ts | 131 --------------------------------------- 10 files changed, 141 insertions(+), 149 deletions(-) delete mode 100644 typed.d.ts diff --git a/README.md b/README.md index d5746d6..1f8bfee 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Typed.js is a library that types. Enter in any string, and watch it type at the ### CDN ```html - + ``` For use directly in the browser via ` + \n```\n\n#### Setup\n\nThis is really all you need to get going.\n\n```javascript\n// Can also be included with a regular script tag\nimport Typed from 'typed.js';\n\nvar options = {\n strings: ['First sentence.', '& a second sentence.'],\n typeSpeed: 40,\n};\n\nvar typed = new Typed('.element', options);\n```\n\n### Use with ReactJS\n\nHook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/\n\nClass component: https://jsfiddle.net/mattboldt/ovat9jmp/\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https://github.com/Orlandster/vue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https://github.com/Orlandster/wc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps://github.com/features/package-registry\n\nhttps://slack.com/\n\nhttps://envato.com/\n\nhttps://gorails.com/\n\nhttps://productmap.co/\n\nhttps://www.typed.com/\n\nhttps://apeiron.io\n\nhttps://git.market/\n\nhttps://commando.io/\n\nhttp://testdouble.com/agency.html\n\nhttps://www.capitalfactory.com/\n\nhttp://www.maxcdn.com/\n\nhttps://www.powerauth.com/\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n\n```\n\n```html\n
\n

Typed.js is a JavaScript library.

\n

It types out sentences.

\n
\n\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('.element', {\n // Waits 1000ms after typing \"First\"\n strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['This is a JavaScript library', 'This is an ES6 module'],\n smartBackspace: true, // Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n/* Cursor */\n.typed-cursor {\n}\n\n/* If fade out option is set */\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('.element', {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML \n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](./.github/CONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)\n", + "content": "[![Build Status](https://travis-ci.org/mattboldt/typed.js.svg?branch=typed-2.0)](https://travis-ci.org/mattboldt/typed.js)\n[![Code Climate](https://codeclimate.com/github/mattboldt/typed.js/badges/gpa.svg)](https://codeclimate.com/github/mattboldt/typed.js)\n[![GitHub release](https://img.shields.io/github/release/mattboldt/typed.js.svg)]()\n[![npm](https://img.shields.io/npm/dt/typed.js.svg)](https://img.shields.io/npm/dt/typed.js.svg)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)\n\n\n\n### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\n---\n\n## Installation\n\n#### NPM\n\n```\nnpm install typed.js\n```\n\n#### Yarn\n\n```\nyarn add typed.js\n```\n\n#### CDN\n\n```html\n\n```\n\n#### Setup\n\nThis is really all you need to get going.\n\n```javascript\n// Can also be included with a regular script tag\nimport Typed from 'typed.js';\n\nvar options = {\n strings: ['First sentence.', '& a second sentence.'],\n typeSpeed: 40,\n};\n\nvar typed = new Typed('.element', options);\n```\n\n### Use with ReactJS\n\nHook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/\n\nClass component: https://jsfiddle.net/mattboldt/ovat9jmp/\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https://github.com/Orlandster/vue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https://github.com/Orlandster/wc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps://github.com/features/package-registry\n\nhttps://slack.com/\n\nhttps://envato.com/\n\nhttps://gorails.com/\n\nhttps://productmap.co/\n\nhttps://www.typed.com/\n\nhttps://apeiron.io\n\nhttps://git.market/\n\nhttps://commando.io/\n\nhttp://testdouble.com/agency.html\n\nhttps://www.capitalfactory.com/\n\nhttp://www.maxcdn.com/\n\nhttps://www.powerauth.com/\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n\n```\n\n```html\n
\n

Typed.js is a JavaScript library.

\n

It types out sentences.

\n
\n\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('.element', {\n // Waits 1000ms after typing \"First\"\n strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['This is a JavaScript library', 'This is an ES6 module'],\n smartBackspace: true, // Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n/* Cursor */\n.typed-cursor {\n}\n\n/* If fade out option is set */\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('.element', {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML \n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](./.github/CONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)\n", "longname": "/Users/mattboldt/Documents/dev/Repos/typedjs/README.md", "name": "./README.md", "static": true, @@ -2248,7 +2248,7 @@ }, { "kind": "packageJSON", - "content": "{\n \"name\": \"typed.js\",\n \"version\": \"2.0.132\",\n \"homepage\": \"https://github.com/mattboldt/typed.js\",\n \"repository\": \"https://github.com/mattboldt/typed.js\",\n \"license\": \"MIT\",\n \"author\": \"Matt Boldt\",\n \"description\": \"A JavaScript Typing Animation Library\",\n \"type\": \"module\",\n \"source\": \"src/typed.js\",\n \"types\": \"./index.d.ts\",\n \"files\": [\n \"dist\",\n \"index.d.ts\"\n ],\n \"exports\": {\n \"require\": \"./dist/typed.cjs\",\n \"import\": \"./dist/typed.module.js\"\n },\n \"main\": \"./dist/typed.cjs\",\n \"module\": \"./dist/typed.module.js\",\n \"unpkg\": \"./dist/typed.umd.js\",\n \"keywords\": [\n \"typed\",\n \"animation\"\n ],\n \"devDependencies\": {\n \"esdoc\": \"^1.1.0\",\n \"esdoc-ecmascript-proposal-plugin\": \"^1.0.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"microbundle\": \"^0.15.1\"\n },\n \"scripts\": {\n \"build\": \"microbundle --name=Typed\",\n \"dev\": \"microbundle --name=Typed watch\"\n }\n}\n", + "content": "{\n \"name\": \"typed.js\",\n \"version\": \"2.0.14\",\n \"homepage\": \"https://github.com/mattboldt/typed.js\",\n \"repository\": \"https://github.com/mattboldt/typed.js\",\n \"license\": \"MIT\",\n \"author\": \"Matt Boldt\",\n \"description\": \"A JavaScript Typing Animation Library\",\n \"type\": \"module\",\n \"source\": \"src/typed.js\",\n \"types\": \"./index.d.ts\",\n \"files\": [\n \"dist\",\n \"index.d.ts\"\n ],\n \"exports\": {\n \"require\": \"./dist/typed.cjs\",\n \"import\": \"./dist/typed.module.js\"\n },\n \"main\": \"./dist/typed.cjs\",\n \"module\": \"./dist/typed.module.js\",\n \"unpkg\": \"./dist/typed.umd.js\",\n \"keywords\": [\n \"typed\",\n \"animation\"\n ],\n \"devDependencies\": {\n \"esdoc\": \"^1.1.0\",\n \"esdoc-ecmascript-proposal-plugin\": \"^1.0.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"microbundle\": \"^0.15.1\"\n },\n \"scripts\": {\n \"build\": \"microbundle --name=Typed\",\n \"dev\": \"microbundle --name=Typed watch\"\n }\n}\n", "longname": "/Users/mattboldt/Documents/dev/Repos/typedjs/package.json", "name": "package.json", "static": true, diff --git a/index.d.ts b/index.d.ts index ee98d67..9d75323 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,8 +4,129 @@ * @param {object} options options object * @returns {object} a new Typed object */ -export default class Typed { - constructor(elementId: any, options: any); + +declare module 'typed.js' { + export interface TypedOptions { + /** + * strings to be typed + */ + strings?: string[]; + /** + * ID or instance of HTML element of element containing string children + */ + stringsElement?: string | Element; + /** + * type speed in milliseconds + */ + typeSpeed?: number; + /** + * time before typing starts in milliseconds + */ + startDelay?: number; + /** + * backspacing speed in milliseconds + */ + backSpeed?: number; + /** + * only backspace what doesn't match the previous string + */ + smartBackspace?: boolean; + /** + * shuffle the strings + */ + shuffle?: boolean; + /** + * time before backspacing in milliseconds + */ + backDelay?: number; + /** + * Fade out instead of backspace + */ + fadeOut?: boolean; + /** + * css class for fade animation + */ + fadeOutClass?: string; + /** + * Fade out delay in milliseconds + */ + fadeOutDelay?: number; + /** + * loop strings + */ + loop?: boolean; + /** + * amount of loops + */ + loopCount?: number; + /** + * show cursor + */ + showCursor?: boolean; + /** + * character for cursor + */ + cursorChar?: string; + /** + * insert CSS for cursor and fadeOut into HTML + */ + autoInsertCss?: boolean; + /** + * attribute for typing Ex: input placeholder, value, or just HTML text + */ + attr?: string; + /** + * bind to focus and blur if el is text input + */ + bindInputFocusEvents?: boolean; + /** + * 'html' or 'null' for plaintext + */ + contentType?: string; + /** + * All typing is complete + */ + onComplete?(self: Typed): void; + /** + * Before each string is typed + */ + preStringTyped?(arrayPos: number, self: Typed): void; + /** + * After each string is typed + */ + onStringTyped?(arrayPos: number, self: Typed): void; + /** + * During looping, after last string is typed + */ + onLastStringBackspaced?(self: Typed): void; + /** + * Typing has been stopped + */ + onTypingPaused?(arrayPos: number, self: Typed): void; + /** + * Typing has been started after being stopped + */ + onTypingResumed?(arrayPos: number, self: Typed): void; + /** + * After reset + */ + onReset?(self: Typed): void; + /** + * After stop + */ + onStop?(arrayPos: number, self: Typed): void; + /** + * After start + */ + onStart?(arrayPos: number, self: Typed): void; + /** + * After destroy + */ + onDestroy?(self: Typed): void; + } + + export default class Typed { + constructor(elementId: any, options: TypedOptions); /** * Toggle start() and stop() of the Typed instance * @public @@ -128,4 +249,5 @@ export default class Typed { * @private */ private insertCursor; + } } diff --git a/index.html b/index.html index 0c6a4d7..7b534c8 100644 --- a/index.html +++ b/index.html @@ -26,12 +26,12 @@

Typed.js

Basic Demo

- Typed.js^10 is a JavaScript library. -

It types out sentences.

-

`And` `then` `deletes` `them`.

-

Try it out!

+ Typed.js^500 is a JavaScript library. + It types out sentences. + `And` `then` `deletes` `them`. + Try it out!
- + some text
@@ -181,7 +181,8 @@

Bulk Typing

})(); - + +