chore: switch from process.env to importa.meta.env

rollup.config.js

@@ -6,7 +6,7 @@ import analyze from 'rollup-plugin-analyzer'
 import { minifyHtmlLiteralsRollupPlugin } from './config/minifyHtmlLiteralsRollupPlugin.js'
 import { buildStylesRollupPlugin } from './config/buildStylesRollupPlugin.js'
 
-const { NODE_ENV, DEBUG } = process.env
+const { NODE_ENV, DEBUG, PERF } = process.env
 const dev = NODE_ENV !== 'production'
 
 // Build Database.test.js and Picker.js as separate modules at build times so that they are properly tree-shakeable.
@@ -16,8 +16,8 @@ const baseConfig = {
     resolve(),
     cjs(),
     replace({
-      'process.env.NODE_ENV': dev ? '"development"' : '"production"',
-      'process.env.PERF': !!process.env.PERF,
+      'import.meta.env.MODE': dev ? '"development"' : '"production"',
+      'import.meta.env.PERF': !!PERF,
       preventAssignment: true
     }),
     replace({
@@ -30,7 +30,7 @@ const baseConfig = {
     strip({
       include: ['**/*.js'],
       functions: [
-        (!dev && !process.env.PERF) && 'performance.*',
+        (!dev && !PERF) && 'performance.*',
         !dev && 'console.log'
       ].filter(Boolean)
     }),

src/database/utils/jsonChecksum.js

@@ -6,7 +6,7 @@ export async function jsonChecksum (object) {
   const inString = JSON.stringify(object)
   let inBuffer = binaryStringToArrayBuffer(inString)
   /* istanbul ignore else */
-  if (process.env.NODE_ENV === 'test') {
+  if (import.meta.env.MODE === 'test') {
     // For whatever reason Node's built-in crypto throws an error for ArrayBuffers
     inBuffer = Buffer.from(new Uint8Array(inBuffer))
   }

src/picker/components/Picker/Picker.js

@@ -362,7 +362,7 @@ export function createRoot (shadowRoot, props) {
   function calculateEmojiGridStyle (node) {
     calculateWidth(node, abortSignal, width => {
       /* istanbul ignore next */
-      if (process.env.NODE_ENV !== 'test') { // jsdom throws errors for this kind of fancy stuff
+      if (import.meta.env.MODE !== 'test') { // jsdom throws errors for this kind of fancy stuff
         // read all the style/layout calculations we need to make
         const style = getComputedStyle(refs.rootElement)
         const newNumColumns = parseInt(style.getPropertyValue('--num-columns'), 10)
@@ -467,7 +467,7 @@ export function createRoot (shadowRoot, props) {
   createEffect(() => {
     // consider initialLoad to be complete when the first tabpanel and favorites are rendered
     /* istanbul ignore next */
-    if (process.env.NODE_ENV !== 'production' || process.env.PERF) {
+    if (import.meta.env.MODE !== 'production' || import.meta.env.PERF) {
       if (state.currentEmojis.length && state.currentFavorites.length && state.initialLoad) {
         state.initialLoad = false
         requestPostAnimationFrame(() => performance.measure('initialLoad', 'initialLoad'))

src/picker/components/Picker/framework.js

@@ -6,7 +6,7 @@ const unkeyedSymbol = Symbol('un-keyed')
 
 // for debugging
 /* istanbul ignore else */
-if (process.env.NODE_ENV !== 'production') {
+if (import.meta.env.MODE !== 'production') {
   window.parseCache = parseCache
   window.domInstancesCache = domInstancesCache
 }
@@ -37,7 +37,7 @@ function doChildrenNeedRerender (parentNode, newChildren) {
     oldChildrenCount++
   }
   /* istanbul ignore if */
-  if (process.env.NODE_ENV !== 'production' && oldChildrenCount !== parentNode.children.length) {
+  if (import.meta.env.MODE !== 'production' && oldChildrenCount !== parentNode.children.length) {
     throw new Error('parentNode.children.length is different from oldChildrenCount, it should not be')
   }
   // if new children length is different from old, we must re-render
@@ -94,7 +94,7 @@ function patch (expressions, instanceBindings) {
       } else if (expression instanceof Element) { // html tag template returning a DOM element
         newNode = expression
         /* istanbul ignore if */
-        if (process.env.NODE_ENV !== 'production' && newNode === targetNode) {
+        if (import.meta.env.MODE !== 'production' && newNode === targetNode) {
           // it seems impossible for the framework to get into this state, may as well assert on it
           // worst case scenario is we lose focus if we call replaceWith on the same node
           throw new Error('the newNode and targetNode are the same, this should never happen')
@@ -140,7 +140,7 @@ function parse (tokens) {
         case '<': {
           const nextChar = token.charAt(j + 1)
           /* istanbul ignore if */
-          if (process.env.NODE_ENV !== 'production' && !/[/a-z]/.test(nextChar)) {
+          if (import.meta.env.MODE !== 'production' && !/[/a-z]/.test(nextChar)) {
             // we don't need to support comments ('<!') because we always use html-minify-literals
             // also we don't support '<' inside tags, e.g. '<div> 2 < 3 </div>'
             throw new Error('framework currently only supports a < followed by / or a-z')
@@ -161,7 +161,7 @@ function parse (tokens) {
         }
         case '=': {
           /* istanbul ignore if */
-          if (process.env.NODE_ENV !== 'production' && !withinTag) {
+          if (import.meta.env.MODE !== 'production' && !withinTag) {
             // we don't currently support '=' anywhere but inside a tag, e.g.
             // we don't support '<div>2 + 2 = 4</div>'
             throw new Error('framework currently does not support = anywhere but inside a tag')
@@ -194,7 +194,7 @@ function parse (tokens) {
     }
 
     /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
+    if (import.meta.env.MODE !== 'production') {
       // remind myself that this object is supposed to be immutable
       Object.freeze(binding)
     }
@@ -246,7 +246,7 @@ function traverseAndSetupBindings (dom, elementsToBindings) {
           : findPlaceholderComment(element, i) // not an attribute binding, so has a placeholder comment
 
         /* istanbul ignore if */
-        if (process.env.NODE_ENV !== 'production' && !targetNode) {
+        if (import.meta.env.MODE !== 'production' && !targetNode) {
           throw new Error('targetNode should not be undefined')
         }
 
@@ -258,7 +258,7 @@ function traverseAndSetupBindings (dom, elementsToBindings) {
         }
 
         /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
+        if (import.meta.env.MODE !== 'production') {
           // remind myself that this object is supposed to be monomorphic (for better JS engine perf)
           Object.seal(instanceBinding)
         }

src/picker/components/Picker/reactivity.js

@@ -17,7 +17,7 @@ export function createState (abortSignal) {
       return
     }
     /* istanbul ignore if */
-    if (process.env.NODE_ENV !== 'production' && recursionDepth === MAX_RECURSION_DEPTH) {
+    if (import.meta.env.MODE !== 'production' && recursionDepth === MAX_RECURSION_DEPTH) {
       throw new Error('max recursion depth, you probably didn\'t mean to do this')
     }
     const observersToRun = [...dirtyObservers]
@@ -82,7 +82,7 @@ export function createState (abortSignal) {
 
   // for debugging
   /* istanbul ignore else */
-  if (process.env.NODE_ENV !== 'production') {
+  if (import.meta.env.MODE !== 'production') {
     window.state = state
   }
 
@@ -91,7 +91,7 @@ export function createState (abortSignal) {
     destroyed = true
 
     /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
+    if (import.meta.env.MODE !== 'production') {
       delete window.state
     }
   })

src/picker/components/Picker/utils.js

@@ -16,7 +16,7 @@ export function parseTemplate (htmlString) {
   template.innerHTML = htmlString
 
   /* istanbul ignore next */
-  if (process.env.NODE_ENV !== 'production') {
+  if (import.meta.env.MODE !== 'production') {
     if (template.content.children.length !== 1) {
       throw new Error('only 1 child allowed for now')
     }

src/picker/utils/calculateTextWidth.js

@@ -1,7 +1,7 @@
 // get the width of the text inside of a DOM node, via https://stackoverflow.com/a/59525891/680742
 export function calculateTextWidth (node) {
   /* istanbul ignore else */
-  if (process.env.NODE_ENV === 'test') {
+  if (import.meta.env.MODE === 'test') {
     return 1
   } else {
     const range = document.createRange()

src/picker/utils/emojiSupport.js

@@ -15,7 +15,7 @@ export const detectEmojiSupportLevel = () => {
     ))
 
     /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
+    if (import.meta.env.MODE !== 'production') {
       promise.then(emojiSupportLevel => {
         console.log('emoji support level', emojiSupportLevel)
       })

src/picker/utils/testColorEmojiSupported.js

@@ -42,7 +42,7 @@ const compareFeatures = (feature1, feature2) => {
 }
 
 export function testColorEmojiSupported (text) {
-  if (process.env.NODE_ENV === 'test') {
+  if (import.meta.env.MODE === 'test') {
     if (simulateCanvasError) {
       throw new Error('canvas error')
     } else if (simulateOldBrowser) {