Skip to content

Commit

Permalink
refactor: migrate to esm-env
Browse files Browse the repository at this point in the history
  • Loading branch information
lihbr committed Dec 10, 2024
1 parent 3325e86 commit 1a9b3a7
Show file tree
Hide file tree
Showing 11 changed files with 98 additions and 112 deletions.
7 changes: 7 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
},
"dependencies": {
"@prismicio/client": "^7.12.0",
"esm-env": "^1.2.1",
"vue-router": "^4.5.0"
},
"devDependencies": {
Expand Down
3 changes: 2 additions & 1 deletion src/PrismicImage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
asImageWidthSrcSet,
isFilled,
} from "@prismicio/client"
import { DEV } from "esm-env"
import { computed, watchEffect } from "vue"
import { devMsg } from "./lib/devMsg"
Expand Down Expand Up @@ -89,7 +90,7 @@ defineOptions({ name: "PrismicImage" })
const { options } = usePrismic()
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
if (DEV) {
watchEffect(() => {
if (typeof props.alt === "string" && props.alt !== "") {
console.warn(
Expand Down
3 changes: 2 additions & 1 deletion src/PrismicLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
type PrismicDocument,
asLinkAttrs,
} from "@prismicio/client"
import { DEV } from "esm-env"
import { computed, watchEffect } from "vue"
import { devMsg } from "./lib/devMsg"
Expand Down Expand Up @@ -102,7 +103,7 @@ defineOptions({ name: "PrismicLink" })
const { options } = usePrismic()
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
if (DEV) {
watchEffect(() => {
if (props.field) {
if (!props.field.link_type) {
Expand Down
3 changes: 2 additions & 1 deletion src/PrismicText.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts" setup>
import type { RichTextField } from "@prismicio/client"
import { asText, isFilled } from "@prismicio/client"
import { DEV } from "esm-env"
import { watchEffect } from "vue"
import Wrapper from "./lib/Wrapper.vue"
Expand Down Expand Up @@ -42,7 +43,7 @@ export type PrismicTextProps = {
const props = defineProps<PrismicTextProps>()
defineOptions({ name: "PrismicText" })
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
if (DEV) {
watchEffect(() => {
if (typeof props.field === "string") {
throw new Error(
Expand Down
68 changes: 34 additions & 34 deletions src/SliceZone/TODOSliceComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DEV } from "esm-env"
import type { PropType } from "vue"
import { computed, defineComponent, h, watchEffect } from "vue"

Expand All @@ -10,40 +11,39 @@ import type { SliceComponentType, SliceLike } from "./types"
* This is also the default Vue component rendered when a component mapping
* cannot be found in `<SliceZone />`.
*/
export const TODOSliceComponent =
typeof process !== "undefined" && process.env.NODE_ENV === "development"
? /*#__PURE__*/ (defineComponent({
name: "TODOSliceComponent",
props: {
slice: {
type: Object as PropType<SliceLike>,
required: true,
},
export const TODOSliceComponent = DEV
? /*#__PURE__*/ (defineComponent({
name: "TODOSliceComponent",
props: {
slice: {
type: Object as PropType<SliceLike>,
required: true,
},
setup(props) {
const type = computed(() => {
return "slice_type" in props.slice
? props.slice.slice_type
: props.slice.type
})
},
setup(props) {
const type = computed(() => {
return "slice_type" in props.slice
? props.slice.slice_type
: props.slice.type
})

watchEffect(() => {
console.warn(
`[SliceZone] Could not find a component for Slice type "${type.value}"`,
props.slice,
)
})
watchEffect(() => {
console.warn(
`[SliceZone] Could not find a component for Slice type "${type.value}"`,
props.slice,
)
})

return () => {
return h(
"section",
{
"data-slice-zone-todo-component": "",
"data-slice-type": type.value,
},
[`Could not find a component for Slice type "${type.value}"`],
)
}
},
}) as SliceComponentType)
: ((() => null) as SliceComponentType)
return () => {
return h(
"section",
{
"data-slice-zone-todo-component": "",
"data-slice-type": type.value,
},
[`Could not find a component for Slice type "${type.value}"`],
)
}
},
}) as SliceComponentType)
: ((() => null) as SliceComponentType)
12 changes: 0 additions & 12 deletions test/components-PrismicImage.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,6 @@ it("prioritizes widths prop over pixelDensities", (ctx) => {
})

it("warns if both widths and pixelDensites are given", (ctx) => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)
Expand All @@ -191,7 +188,6 @@ it("warns if both widths and pixelDensites are given", (ctx) => {
)

consoleWarnSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})

describe("renders alt attribute", () => {
Expand Down Expand Up @@ -223,9 +219,6 @@ describe("renders alt attribute", () => {
})

it("warns if a non-decorative fallback alt value is given", (ctx) => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)
Expand All @@ -243,7 +236,6 @@ describe("renders alt attribute", () => {
)

consoleWarnSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})

it("with an explicit decorative alt when field has an alt value", (ctx) => {
Expand All @@ -269,9 +261,6 @@ describe("renders alt attribute", () => {
})

it("warns if a non-decorative alt value is given", (ctx) => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)
Expand All @@ -289,7 +278,6 @@ describe("renders alt attribute", () => {
)

consoleWarnSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})
})

Expand Down
12 changes: 0 additions & 12 deletions test/components-PrismicLink.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -468,9 +468,6 @@ describe("renders internal links using component", () => {
})

it("throws when trying to render a non-link field", () => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleErrorSpy = vi
.spyOn(console, "error")
.mockImplementation(() => void 0)
Expand All @@ -485,13 +482,9 @@ it("throws when trying to render a non-link field", () => {
).toThrowError(/missing-link-properties/i)

consoleErrorSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})

it("warns when trying to render an invalid link field", () => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)
Expand Down Expand Up @@ -529,13 +522,9 @@ it("warns when trying to render an invalid link field", () => {
)

consoleWarnSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})

it("warns when trying to render an invalid document", () => {
// The warning only logs in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)
Expand All @@ -559,7 +548,6 @@ it("warns when trying to render an invalid document", () => {
)

consoleWarnSpy.mockRestore()
process.env.NODE_ENV = originalNodeEnv
})

it("reacts to changes properly", async (ctx) => {
Expand Down
6 changes: 0 additions & 6 deletions test/components-PrismicText.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,10 +129,6 @@ describe("renders with wrapper", () => {
})

it("throws error if passed a string-based field (e.g. Key Text or Select)", () => {
// The error is only thrown in "development".
const originalNodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = "development"

expect(() =>
mount(PrismicText, {
props: {
Expand All @@ -142,8 +138,6 @@ it("throws error if passed a string-based field (e.g. Key Text or Select)", () =
},
}),
).toThrowError(/prismictext-works-only-with-rich-text-and-title-fields/i)

process.env.NODE_ENV = originalNodeEnv
})

it("reacts to changes properly", async () => {
Expand Down
45 changes: 45 additions & 0 deletions test/components-SliceZone.prod.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { expect, it, vi } from "vitest"

import { mount } from "@vue/test-utils"

import { createWrapperComponent } from "./__fixtures__/WrapperComponent"

import type { SliceComponentType } from "../src"
import {
SliceZone,
defineSliceZoneComponents,
getSliceComponentProps,
} from "../src"

vi.mock("esm-env", async () => ({ DEV: false }))

it("doesn't render TODO component in production", () => {
const consoleWarnSpy = vi
.spyOn(console, "warn")
.mockImplementation(() => void 0)

const Foo = createWrapperComponent<SliceComponentType>(
"Foo",
getSliceComponentProps(),
)

const wrapper = mount(SliceZone, {
props: {
slices: [
{ id: "1", slice_type: "foo" },
{ id: "2", slice_type: "bar" },
],
components: defineSliceZoneComponents({
foo: Foo,
}),
},
})

expect(wrapper.html()).toBe(`<div class="wrapperComponentFoo"></div>`)
expect(consoleWarnSpy).not.toHaveBeenCalledWith(
expect.stringMatching(/could not find a component/i),
{ id: "2", slice_type: "bar" },
)

consoleWarnSpy.mockRestore()
})
Loading

0 comments on commit 1a9b3a7

Please sign in to comment.