Merge pull request #1599 from maizzle/feat/not-env

feat: add `not-env` tag

Author: cossssmin

src/posthtml/plugins/envTags.js

@@ -7,21 +7,38 @@ const plugin = (env => tree => {
       return node
     }
 
-    const tagEnv = node.tag.split(':').pop()
+    // Handle <env:?> tags (render only if current env matches)
+    if (
+      typeof node.tag === 'string'
+      && node.tag.startsWith('env:')
+    ) {
+      const tagEnv = node.tag.slice(4) // Remove 'env:' prefix
 
-    // Tag targets current env, remove it and return its content
-    if (node.tag === `env:${env}`) {
-      node.tag = false
+      if (tagEnv === '' || tagEnv !== env) {
+        // No env specified or tag doesn't target current env, remove everything
+        node.content = []
+        node.tag = false
+      } else {
+        // Tag targets current env, remove tag and keep content
+        node.tag = false
+      }
     }
 
-    // Tag doesn't target current env, remove it completely
+    // Handle <not-env:?> tags (render only if current env does not match)
     if (
       typeof node.tag === 'string'
-      && node.tag.startsWith('env:')
-      && tagEnv !== env
+      && node.tag.startsWith('not-env:')
     ) {
-      node.content = []
-      node.tag = false
+      const tagEnv = node.tag.slice(8) // Remove 'not-env:' prefix
+
+      if (tagEnv === '' || tagEnv === env) {
+        // No env specified or tag targets current env, remove everything
+        node.content = []
+        node.tag = false
+      } else {
+        // Tag doesn't target current env, remove tag and keep content
+        node.tag = false
+      }
     }
 
     return node

test/render.test.js

@@ -93,43 +93,6 @@ describe.concurrent('Render', () => {
     expect(inProduction).toBe('<div title="production"></div>')
   })
 
-  test('<env:> tags', async () => {
-    const source = `
-      <env:local>{{ page.env }}</env:local>
-      <env:production>{{ page.env }}</env:production>
-      <fake:production>ignore</fake:production>
-      <env:>test</env:>
-    `
-
-    const { html: inDev } = await render(source)
-
-    const { html: inProduction } = await render(source, {
-      env: 'production'
-    })
-
-    // we don't pass `env` to the page object so it remains as-is
-    expect(cleanString(inDev)).toBe('{{ page.env }} <fake:production>ignore</fake:production>')
-    expect(inProduction.trim()).toBe('production\n      <fake:production>ignore</fake:production>')
-  })
-
-  test('fetch component', async () => {
-    const { html } = await render(`
-      <x-list>
-        <fetch url="test/stubs/data.json">
-          {{ undefinedVariable }}
-          <each loop="user in response">{{ user.name + (loop.last ? '' : ', ') }}</each>
-          @{{ ignored }}
-        </fetch>
-      </x-list>
-    `, {
-      components: {
-        folders: ['test/stubs/components'],
-      }
-    })
-
-    expect(cleanString(html)).toBe('<h1>Results</h1> {{ undefinedVariable }} Leanne Graham, Ervin Howell {{ ignored }}')
-  })
-
   test('uses expressions options', async () => {
     const { html } = await render(`
       <script locals>

test/tags.test.js

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'vitest'
+import { render } from '../src/generators/render.js'
+import { run as useTransformers } from '../src/transformers/index.js'
+
+const cleanString = (str) => str.replace(/\s+/g, ' ').trim()
+
+describe.concurrent('Tags', () => {
+  test('fetch component', async () => {
+    const { html } = await render(`
+      <x-list>
+        <fetch url="test/stubs/data.json">
+          {{ undefinedVariable }}
+          <each loop="user in response">{{ user.name + (loop.last ? '' : ', ') }}</each>
+          @{{ ignored }}
+        </fetch>
+      </x-list>
+    `, {
+      components: {
+        folders: ['test/stubs/components'],
+      }
+    })
+
+    expect(cleanString(html)).toBe('<h1>Results</h1> {{ undefinedVariable }} Leanne Graham, Ervin Howell {{ ignored }}')
+  })
+
+  test('<template> tags', async () => {
+    const { html } = await useTransformers(`
+      <template uppercase>test</template>
+      <template preserve>test</template>
+    `)
+
+    expect(cleanString(html)).toBe('TEST <template>test</template>')
+  })
+
+  test('<env> tags', async () => {
+    const source = `
+      <env:local>{{ page.env }}</env:local>
+      <env:production>{{ page.env }}</env:production>
+      <fake:production>ignore</fake:production>
+      <env:>test</env:>
+    `
+
+    const { html: inDev } = await render(source)
+
+    const { html: inProduction } = await render(source, {
+      env: 'production'
+    })
+
+    // we don't pass `env` to the page object so it remains as-is
+    expect(cleanString(inDev)).toBe('{{ page.env }} <fake:production>ignore</fake:production>')
+    expect(inProduction.trim()).toBe('production\n      <fake:production>ignore</fake:production>')
+  })
+
+  test('<not-env> tags', async () => {
+    const source = `
+      <not-env:local>{{ page.env }}</not-env:local>
+      <not-env:production>{{ page.env }}</not-env:production>
+      <fake:production>ignore</fake:production>
+      <not-env:>test</not-env:>
+    `
+
+    const { html: inDev } = await render(source)
+
+    const { html: inProduction } = await render(source, {
+      env: 'production'
+    })
+
+    // we don't pass `env` to the page object so it remains as-is
+    expect(cleanString(inDev)).toBe('{{ page.env }} <fake:production>ignore</fake:production>')
+    expect(cleanString(inProduction)).toBe('production <fake:production>ignore</fake:production>')
+  })
+})