fix: never assume the definition of __DEV__ in the global scope

Especially appropriate for jest tests and react-native-web.

Author: jsamr

packages/render-html/src/RenderHTMLConfigProvider.tsx

@@ -61,7 +61,7 @@ export default function RenderHTMLConfigProvider(
   const engine = useAmbientTRenderEngine();
   const profile = useProfiler({ prop: 'remoteErrorView or remoteLoadingView' });
   const sourceLoaderConfig = useMemo(() => {
-    __DEV__ && profile();
+    typeof __DEV__ === 'boolean' && __DEV__ && profile();
     return {
       remoteErrorView: remoteErrorView || defaultRenderError,
       remoteLoadingView: remoteLoadingView || defaultRenderLoading

packages/render-html/src/RenderHTMLDebug.tsx

@@ -5,7 +5,7 @@ import { RenderHTMLProps } from './shared-types';
 const RenderHTMLDebug = function RenderHTMLDebug(
   props: PropsWithChildren<RenderHTMLProps>
 ) {
-  if (__DEV__) {
+  if (typeof __DEV__ === 'boolean' && __DEV__) {
     if (typeof props.contentWidth !== 'number') {
       console.warn(debugMessage.contentWidth);
     }

packages/render-html/src/RenderHTMLSource.tsx

@@ -63,7 +63,7 @@ function RawSourceLoader({
 }: SourceLoaderProps): ReactElement | null {
   if (isEmptySource(source)) {
     /* istanbul ignore next */
-    if (__DEV__) {
+    if (typeof __DEV__ === 'boolean' && __DEV__) {
       console.warn(debugMessage.noSource);
     }
     return null;
@@ -111,13 +111,13 @@ const RenderHTMLSource = memo(
       prop: 'onDocumentMetadataLoaded or onTTreeChange'
     });
     const ttreeEvents: TTreeEvents = useMemo(() => {
-      __DEV__ && profile();
+      typeof __DEV__ === 'boolean' && __DEV__ && profile();
       return {
         onDocumentMetadataLoaded,
         onTTreeChange
       };
     }, [onDocumentMetadataLoaded, onTTreeChange, profile]);
-    if (__DEV__) {
+    if (typeof __DEV__ === 'boolean' && __DEV__) {
       if (!(typeof contentWidth === 'number')) {
         console.warn(debugMessage.contentWidth);
       }

packages/render-html/src/TNodeRenderer.tsx

@@ -28,15 +28,15 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
   if (tnode.type === 'text') {
     return React.createElement(TTextRenderer, tnodeProps);
   }
-  if (tnode.type === 'empty' && __DEV__) {
+  if (typeof __DEV__ === 'boolean' && __DEV__ && tnode.type === 'empty') {
     if (tnode.isUnregistered) {
       console.warn(
         `There is no custom renderer registered for tag "${tnode.tagName}" which is not part of the HTML5 standard. The tag will not be rendered.` +
-          ' If you don\'t want this tag to be rendered, add it to "ignoredTags" prop array. If you do, register a custom renderer for this tag.'
+          ' If you don\'t want this tag to be rendered, add it to "ignoredTags" prop array. If you do, register an HTMLElementModel for this tag with "customHTMLElementModels" prop.'
       );
     } else if (tnode.tagName !== 'head') {
       console.warn(
-        `The "${tnode.tagName}" tag is a valid HTML element but is not handled by this library. You must register a custom renderer or plugin and make sure its content model is not set to "none".` +
+        `The "${tnode.tagName}" tag is a valid HTML element but is not handled by this library. You must extend the default HTMLElementModel for this tag with "customHTMLElementModels" prop and make sure its content model is not set to "none".` +
           ' If you don\'t want this tag to be rendered, add it to "ignoredTags" prop array.'
       );
     }

packages/render-html/src/TRenderEngineProvider.tsx

@@ -77,7 +77,11 @@ export const defaultTRenderEngineProviderProps: TRenderEngineConfig = {
  */
 export function useAmbientTRenderEngine() {
   const engine = React.useContext(TRenderEngineContext);
-  if (__DEV__ && engine === defaultTRenderEngine) {
+  if (
+    typeof __DEV__ === 'boolean' &&
+    __DEV__ &&
+    engine === defaultTRenderEngine
+  ) {
     console.error('TRenderEngineProvider is missing in the render tree.');
   }
   return engine;

packages/render-html/src/context/RenderRegistryProvider.tsx

@@ -31,7 +31,7 @@ export default function RenderRegistryProvider({
 }>) {
   const profile = useProfiler({ prop: 'renderers' });
   const registry = useMemo(() => {
-    __DEV__ && profile();
+    typeof __DEV__ === 'boolean' && __DEV__ && profile();
     return new RenderRegistry(renderers, elementModels);
   }, [renderers, elementModels, profile]);
   return (

packages/render-html/src/context/RenderersPropsProvider.tsx

@@ -33,7 +33,7 @@ export default function RenderersPropsProvider(
 ) {
   const profile = useProfiler({ prop: 'renderersProps' });
   const mergedRenderersProps = useMemo(() => {
-    __DEV__ && profile();
+    typeof __DEV__ === 'boolean' && __DEV__ && profile();
     return mergeDeepRight(defaultRendererProps, props.renderersProps || {});
   }, [props.renderersProps, profile]);
   return React.createElement(

packages/render-html/src/context/defaultSharedProps.ts

@@ -3,7 +3,7 @@ import { RenderHTMLAmbiantSharedProps } from '../shared-types';
 
 function WebViewPlaceholder() {
   /* istanbul ignore else */
-  if (__DEV__) {
+  if (typeof __DEV__ === 'boolean' && __DEV__) {
     console.warn(
       'One of your renderers is attempting to use WebView component, which has not been ' +
         "provided as a prop to the RenderHtml component. As a consequence, the element won't be rendered."

packages/render-html/src/debugMessages.ts

@@ -18,7 +18,7 @@ let debugMessage: Record<DebugType, string>;
 
 export type DebugMessages = typeof debugMessage;
 /* istanbul ignore next */
-if (__DEV__) {
+if (typeof __DEV__ === 'boolean' && __DEV__) {
   debugMessage = {
     outdatedComputeImagesMaxWidth:
       "You're attempting to use an outdated prop, 'computeImagesMaxWidth'. This prop has been replaced in version 6 with 'computeEmbeddedMaxWidth'.",

packages/render-html/src/elements/ListElement.tsx

@@ -110,7 +110,11 @@ export default function ListElement({
     ownListType ||
     listStyleTypeFallbackRecord[listType];
   const listStyleType = ownListType || selectedListType;
-  if (__DEV__ && !(listStyleType in listStyleSpecs)) {
+  if (
+    typeof __DEV__ === 'boolean' &&
+    __DEV__ &&
+    !(listStyleType in listStyleSpecs)
+  ) {
     if (listStyleType.match(/^("|')/)) {
       console.warn(
         "This library doesn't support strings for list-style-type CSS properties."