refactor(components): rewrite Code component and usePrism hook

* move Prism styles to Sass placeholders to avoid repeats
* let usePrism consumer define its plugins (remove default ones)
* remove `plugins` prop from Code component
* add new props to Code component to let consumer configure plugins
(and handle plugin list from the given options)

However there are some problems with Prism plugins: line-highlight and
treeview does not seems to be loaded. I don't want to use Babel instead
of SWC so I have no solution for now.

1 files changed, 61 insertions, 32 deletions

diff --git a/public/prism/prism-cshtml.js b/public/prism/prism-cshtml.js
index df73bac..c427353 100644
--- a/public/prism/prism-cshtml.js
+++ b/public/prism/prism-cshtml.js
@@ -30,9 +30,29 @@
   }
 
   var round = nested(/\((?:[^()'"@/]|<str>|<comment>|<self>)*\)/.source, 2);
-  var square = nested(/\[(?:[^\[\]'"@/]|<str>|<comment>|<self>)*\]/.source, 2);
+  var square = nested(/\[(?:[^\[\]'"@/]|<str>|<comment>|<self>)*\]/.source, 1);
   var curly = nested(/\{(?:[^{}'"@/]|<str>|<comment>|<self>)*\}/.source, 2);
-  var angle = nested(/<(?:[^<>'"@/]|<str>|<comment>|<self>)*>/.source, 2);
+  var angle = nested(/<(?:[^<>'"@/]|<comment>|<self>)*>/.source, 1);
+
+  var inlineCs =
+    /@/.source +
+    /(?:await\b\s*)?/.source +
+    '(?:' +
+    /(?!await\b)\w+\b/.source +
+    '|' +
+    round +
+    ')' +
+    '(?:' +
+    /[?!]?\.\w+\b/.source +
+    '|' +
+    '(?:' +
+    angle +
+    ')?' +
+    round +
+    '|' +
+    square +
+    ')*' +
+    /(?![?!\.(\[]|<(?!\/))/.source;
 
   // Note about the above bracket patterns:
   // They all ignore HTML expressions that might be in the C# code. This is a problem because HTML (like strings and
@@ -46,9 +66,21 @@
   // To somewhat alleviate the problem a bit, the patterns for characters (e.g. 'a') is very permissive, it also
   // allows invalid characters to support HTML expressions like this: <p>That's it!</p>.
 
+  var tagAttrInlineCs = /@(?![\w()])/.source + '|' + inlineCs;
+  var tagAttrValue =
+    '(?:' +
+    /"[^"@]*"|'[^'@]*'|[^\s'"@>=]+(?=[\s>])/.source +
+    '|' +
+    '["\'][^"\'@]*(?:(?:' +
+    tagAttrInlineCs +
+    ')[^"\'@]*)+["\']' +
+    ')';
+
   var tagAttrs =
-    /(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?/
-      .source;
+    /(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*<tagAttrValue>|(?=[\s/>])))+)?/.source.replace(
+      /<tagAttrValue>/,
+      tagAttrValue
+    );
   var tagContent = /(?!\d)[^\s>\/=$<%]+/.source + tagAttrs + /\s*\/?>/.source;
   var tagRegion =
     /\B@?/.source +
@@ -122,6 +154,28 @@
     inside: csharpWithHtml,
   };
 
+  var inlineValue = {
+    pattern: RegExp(/(^|[^@])/.source + inlineCs),
+    lookbehind: true,
+    greedy: true,
+    alias: 'variable',
+    inside: {
+      keyword: /^@/,
+      csharp: cs,
+    },
+  };
+
+  Prism.languages.cshtml.tag.pattern = RegExp(/<\/?/.source + tagContent);
+  Prism.languages.cshtml.tag.inside['attr-value'].pattern = RegExp(
+    /=\s*/.source + tagAttrValue
+  );
+  Prism.languages.insertBefore(
+    'inside',
+    'punctuation',
+    { value: inlineValue },
+    Prism.languages.cshtml.tag.inside['attr-value']
+  );
+
   Prism.languages.insertBefore('cshtml', 'prolog', {
     'razor-comment': {
       pattern: /@\*[\s\S]*?\*@/,
@@ -172,6 +226,8 @@
               /\s*/.source +
               curly +
               ')*',
+            // @helper Ident(params) { ... }
+            /helper\s+\w+\s*/.source + round + /\s*/.source + curly,
           ].join('|') +
           ')'
       ),
@@ -194,34 +250,7 @@
       },
     },
 
-    value: {
-      pattern: RegExp(
-        /(^|[^@])@/.source +
-          /(?:await\b\s*)?/.source +
-          '(?:' +
-          /\w+\b/.source +
-          '|' +
-          round +
-          ')' +
-          '(?:' +
-          /[?!]?\.\w+\b/.source +
-          '|' +
-          round +
-          '|' +
-          square +
-          '|' +
-          angle +
-          round +
-          ')*'
-      ),
-      lookbehind: true,
-      greedy: true,
-      alias: 'variable',
-      inside: {
-        keyword: /^@/,
-        csharp: cs,
-      },
-    },
+    value: inlineValue,
 
     'delegate-operator': {
       pattern: /(^|[^@])@(?=<)/,