codemirror-textmate - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/Highlighter.js

@@ -0,0 +0,0 @@ "use strict";

dist/index.js

@@ -47,4 +47,4 @@ "use strict";
 exports.unlinkInjections = unlinkInjections;
-const themedHighlighters = new Map();
-themedHighlighters.set('default', new Highlighter_1.Highlighter());
+exports.themedHighlighters = new Map();
+exports.themedHighlighters.set('default', new Highlighter_1.Highlighter());
 /**
@@ -60,3 +60,3 @@ * Add a Textmate theme to CodeMirror
     }
-    themedHighlighters.set(theme.name, new Highlighter_1.Highlighter(theme));
+    exports.themedHighlighters.set(theme.name, new Highlighter_1.Highlighter(theme));
 }
@@ -103,4 +103,4 @@ exports.addTheme = addTheme;
         const prevThemeName = cmThemeRecord.get(cm) || 'default';
-        const highlighter = themedHighlighters.get(themeName) || themedHighlighters.get('default');
-        const isTextMateTheme = themeName !== 'default' && themedHighlighters.has(themeName);
+        const highlighter = exports.themedHighlighters.get(themeName) || exports.themedHighlighters.get('default');
+        const isTextMateTheme = themeName !== 'default' && exports.themedHighlighters.has(themeName);
         cmThemeRecord.set(cm, themeName);
@@ -114,3 +114,3 @@ if (Highlighter_1.Highlighter.hasLanguageRegistered(languageId)) {
             prevThemeName !== themeName &&
-            themedHighlighters.has(themeName) &&
+            exports.themedHighlighters.has(themeName) &&
             tmThemeStyleNodes.has(prevThemeName)) {
@@ -117,0 +117,0 @@ const meta = tmThemeStyleNodes.get(prevThemeName);

dist/tmToCm.js

@@ -0,0 +0,0 @@ "use strict";

dist/typings/Highlighter.d.ts

@@ -0,0 +0,0 @@ /// <reference types="codemirror" />

dist/typings/index.d.ts

@@ -5,7 +5,7 @@ import { IRawTheme } from 'monaco-textmate';
     gutterSettings?: {
-        background: string;
-        divider: string;
-        foreground: string;
-        lineActiveBackground: string;
-        lineActiveForeground: string;
+        background?: string;
+        divider?: string;
+        foreground?: string;
+        lineActiveBackground?: string;
+        lineActiveForeground?: string;
     };
@@ -31,2 +31,3 @@ }
 export declare function unlinkInjections(scopeName: string, unInjectFrom: string[]): Promise<string[]>;
+export declare const themedHighlighters: Map<string, Highlighter>;
 /**
@@ -33,0 +34,0 @@ * Add a Textmate theme to CodeMirror

dist/typings/tmToCm.d.ts

@@ -0,0 +0,0 @@ import { ITextmateThemePlus } from '.';

package.json

 {
   "name": "codemirror-textmate",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Textmate based tokenization for CodeMirror",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -52,150 +52,13 @@ # Textmate grammars support for CodeMirror
 
-### Light it up
+See `./demo/index.ts` for instructions on how to light it up!
 
-> Example code below assumes that `onigasm` is loaded and ready to go before it itself is executed. [See here for instructions on setting up `onigasm`](https://www.npmjs.com/package/onigasm#light-it-up).
-
-```javascript
-import CodeMirror from 'codemirror'
-import {
-    activateLanguage,
-    addGrammar,
-
-    // [ optional | recommended ] Textmate themes in CodeMirror
-    addTheme,
-    // [ optional ] Grammar injections
-    linkInjections
-} from 'codemirror-textmate'
-
-async function run() {
-    const grammars = {
-        // loading `source.js` as a standalone grammar and as dependency of `text.html.basic` 
-        'source.js': {
-            /**
-             * We'll be using `fetch()` to load grammars, and for that, we'll resolve to URI by prepending the path below with
-             * 'public/grammars/' in `loadGrammar` function below
-             */
-            path: 'Javascript.tmLanguage.json',
-
-            /**
-             * Language ID is only necessary for languages you want to use as CodeMirror mode (eg: cm.setOption('mode', 'javascript'))
-             * To do that, we use `activatelanguage`, which will link one scope name to a language ID (also known as "mode")
-             * 
-             * Grammar dependencies don't need to be "activated", just "adding/registering" them is enough (using `addGrammar`)
-             */ 
-            language: 'javascript',
-
-            /**
-             * Third parameter accepted by `activateLanguage` to specify language loading priority
-             * Loading priority can be 'now' | 'asap' | 'defer' (default)
-             * 
-             *  - [HIGH] 'now' will cause the language (and it's grammars) to load/compile right away (most likely in the next event loop)
-             *  - [MED]  'asap' is like 'now' but will use `requestIdleCallback` if available (fallbacks to `setTimeout`, 10 seconds).
-             *  - [LOW]  'defer' will only do registeration and loading/compiling is deferred until needed (⚠ WILL CAUSE FOUC IN CODEMIRROR) (DEFAULT)
-             */
-            load: 'now'
-        },
-
-        // loading `source.css` as a standalone grammar and as dependency of `text.html.basic` 
-        'source.css': {
-            path: 'Css.tmLanguage.json',
-            language: 'css',
-            load: 'now'
-        },
-
-        // Secondary dependency of `text.html.basic`
-        'source.smarty': {
-            path: 'Smarty.tmLanguage.json',
-        },
-        // Secondary dependency of `text.html.basic`
-        'source.python': {
-            path: 'Python.tmLanguage.json',
-        },
-
-        // Some grammars have other grammars as dependencies. You must register those deps with `addGrammar` or it will throw an Error
-        'text.html.basic': {
-            path: 'Html.tmLanguage.json',
-            language: 'html',
-            load: 'asap',
-        }
-
-    }
-
-    const loadGrammar = (scopeName) => {
-        if (grammars[scopeName]) {
-            const { path } = grammars[scopeName]
-            return (await fetch(`public/grammars/${path}`)).json()
-        }
-    }
-
-    // To avoid FOUC, await for high priority languages to get ready (loading/compiling takes time, and it's an async process for which CM won't wait)
-    await Promise.all(Object.keys(grammars).map(async scopeName => {
-        const { path, language, load } = grammars[scopeName]
-
-        /* EITHER
-         * addGrammar(scopeName, loadGrammar)
-         * OR (VERY ineffcient)
-         * addGrammar(scopeName, async () => (await fetch(`public/grammars/${path}`)).json())
-         */
-        addGrammar(scopeName, loadGrammar)
-
-        if (language) {
-            const prom = activateLanguage(scopeName, language, load)
-            
-            // We must "wait" for high priority languages to load/compile before we render editor to avoid FOUC (Flash of Unstyled Content)
-            if(load === 'now') {
-                await prom
-            }
-
-            // 'asap' although "awaitable", is a medium priority, and doesn't need to be waited for
-            // 'defer' doesn't support awaiting at all
-            return
-        }
-    }))
-
-    const editor = CodeMirror.fromTextArea(document.getElementById('cm-textarea'), {
-        lineNumbers: true,
-        // If you know in advance a language is going to be set on CodeMirror editor and it isn't preloaded by setting the third argument 
-        // to `activateLanguage` to 'now', the contents of the editor would start of and remain as unhighlighted text, until loading is complete
-        mode: 'javascript',
-    })
-
-    // Everything should be working now!
-
-    //////////////////////////////////////////////////////
-
-    //    ____        __  _                   __
-    //   / __ \____  / /_(_)___  ____  ____ _/ /
-    //  / / / / __ \/ __/ / __ \/ __ \/ __ `/ / 
-    // / /_/ / /_/ / /_/ / /_/ / / / / /_/ / /  
-    // \____/ .___/\__/_/\____/_/ /_/\__,_/_/   
-    //     /_/                                  
-    
-    // Using Textmate theme in CodeMirror
-    const theme = await (await fetch('Monokai.tmTheme.json')).json()
-    addTheme(theme)
-    editor.setOption('theme', 'Monokai')
-
-    // Grammar injections, example code below will highlight css-in-js (styled-components, emotion)
-    addGrammar('source.css.styled', async () => (await fetch('public/grammars/css.styled.tmLanguage.json')).json())
-    addGrammar('styled', async () => (await fetch('public/grammars/styled.tmLanguage.json')).json())
-    const affectedLanguages = await linkInjections('styled', ['source.ts', 'source.tsx', 'source.js', 'source.jsx'])
-
-    // You must re-trigger tokenization to apply the update above (if applicable)
-    const activeMode = editor.getOption('mode')
-    if (affectedLanguages.indexOf(activeMode) > -1) {
-        // Resetting cm's mode re-triggers tokenization of entire document
-        editor.setOption('mode', activeMode)
-    }
-}
-
-```
-
 ## API
 
-I strogly believe that the example above covers just about everything this package supports and everything you'll ever need!
 This package is written in TypeScript and is published with TS declaration files. Once you install the package
 see `node_modules/codemirror-textmate/dist/typings/index.d.ts` for available stuff along with expected data types.
 
+VSCode's intellisense will also pick up the declaration files and guide you nicely with auto-complete and errors.
+
 ## License
 
 MIT

src/Highlighter.ts

@@ -40,3 +40,3 @@ import { IGrammar, IRawGrammar, IRawTheme, IToken, Registry, StackElement } from 'monaco-textmate'
             } else {
-                Highlighter.scopeNameToInjections.set(scope, new Set().add(scopeName))
+                Highlighter.scopeNameToInjections.set(scope, new Set<string>().add(scopeName))
             }
@@ -43,0 +43,0 @@ if (Highlighter.scopeNameToLanguageId.has(scope)) {

src/index.ts

@@ -8,7 +8,7 @@ import * as CodeMirror from 'codemirror'
     gutterSettings?: {
-        background: string
-        divider: string
-        foreground: string
-        lineActiveBackground: string
-        lineActiveForeground: string
+        background?: string
+        divider?: string
+        foreground?: string
+        lineActiveBackground?: string
+        lineActiveForeground?: string
     }
@@ -46,3 +46,3 @@ }
 
-const themedHighlighters: Map<string, Highlighter> = new Map()
+export const themedHighlighters: Map<string, Highlighter> = new Map()
 themedHighlighters.set('default', new Highlighter())
@@ -49,0 +49,0 @@

tsconfig.json

@@ -9,4 +9,9 @@ {
         "declarationDir": "dist/typings",
-        "sourceMap": true
-    }
+        "sourceMap": true,
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "demo",
+        "dist"
+    ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

616631

increased by575.8%

Number of package files

34

increased by100%

Lines of code

19902

increased by1176.59%

Worsened metrics

Number of lines in readme file

64

decreased by-68.16%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes