Fix ESM build path (#78)

* style(prettier): fix broken prettier looking for @grafana/toolkit

* fix(build): remove src/ from dist esm paths and prevent @emotion/css in dist/esm dir

* fix(build): prevent import react; import @grafana/ui; in dist esm entrypoint

* fix(circular-deps): prevent circular dependencies in components

* refactor(entrypoint): prefer named exports of usage of *

* docs(changelog): introduce entry for 0.3.3

Author: jackw

.prettierrc.js

@@ -1,3 +1,5 @@
 module.exports = {
-  ...require('@grafana/toolkit/src/config/prettier.plugin.config.json'),
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 120,
 };

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.3.3
+
+- Fix: broken ESM imports due to `src` in ESM build output path
+- Fix: circular dependencies in components
+- Fix: ESM builds importing entire react, grafana/ui, grafana/data, and grafana/experimental
+- Refactor: prefer named exports over asterisk in barrel files
 
 ## v0.3.2
 

rollup.config.ts

@@ -13,7 +13,7 @@ export default [
     plugins: [
       externals({
         deps: true,
-        include: ['react', '@grafana/data', '@grafana/ui', '@grafana/runtime', 'lodash'],
+        include: ['react', '@emotion/css', '@grafana/data', '@grafana/ui', '@grafana/runtime', 'lodash'],
         packagePath,
       }),
       resolve(),
@@ -30,6 +30,7 @@ export default [
         sourcemap: true,
         dir: path.dirname(pkg.module),
         preserveModules: true,
+        preserveModulesRoot: './src',
       },
     ],
   },

src/components/ConnectionConfig.styles.ts

@@ -0,0 +1,5 @@
+import { css } from '@emotion/css';
+
+export const assumeRoleInstructionsStyle = css({
+  maxWidth: '715px',
+});

src/components/ConnectionConfig.tsx

@@ -1,40 +1,24 @@
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse } from '@grafana/ui';
 import {
-  DataSourcePluginOptionsEditorProps,
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceResetOption,
   onUpdateDatasourceJsonDataOption,
   onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { standardRegions } from '../regions';
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthType } from '../types';
+import { AwsAuthType, ConnectionConfigProps } from '../types';
 import { awsAuthProviderOptions } from '../providers';
-import { css } from '@emotion/css';
 import { NewConnectionConfig } from './NewConnectionConfig';
+import { assumeRoleInstructionsStyle } from './ConnectionConfig.styles';
 
 export const DEFAULT_LABEL_WIDTH = 28;
 const DS_TYPES_THAT_SUPPORT_TEMP_CREDS = ['cloudwatch', 'grafana-athena-datasource'];
 const toOption = (value: string) => ({ value, label: value });
 const isAwsAuthType = (value: any): value is AwsAuthType => {
   return typeof value === 'string' && awsAuthProviderOptions.some((opt) => opt.value === value);
 };
-export interface ConnectionConfigProps<
-  J extends AwsAuthDataSourceJsonData = AwsAuthDataSourceJsonData,
-  S = AwsAuthDataSourceSecureJsonData
-> extends DataSourcePluginOptionsEditorProps<J, S> {
-  standardRegions?: string[];
-  loadRegions?: () => Promise<string[]>;
-  defaultEndpoint?: string;
-  skipHeader?: boolean;
-  skipEndpoint?: boolean;
-  children?: React.ReactNode;
-  labelWidth?: number;
-  inExperimentalAuthComponent?: boolean;
-  externalId?: string;
-  newFormStylingEnabled?: boolean;
-}
 
 export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionConfigProps) => {
   const [isARNInstructionsOpen, setIsARNInstructionsOpen] = useState(false);
@@ -184,9 +168,8 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
                 <ol>
                   <li>
                     <p>
-                      1. Create a new IAM role in the AWS console,
-                      and select <code>AWS account</code> as the Trusted entity,
-                      and select <code>Another AWS account</code> as the account.
+                      1. Create a new IAM role in the AWS console, and select <code>AWS account</code> as the Trusted
+                      entity, and select <code>Another AWS account</code> as the account.
                     </p>
                   </li>
                   <li>
@@ -302,8 +285,3 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
     </>
   );
 };
-
-export const assumeRoleInstructionsStyle = css({
-  maxWidth: '715px',
-})
-

src/components/NewConnectionConfig.tsx

@@ -7,10 +7,10 @@ import {
   onUpdateDatasourceSecureJsonDataOption,
   SelectableValue,
 } from '@grafana/data';
-import { AwsAuthType } from '../types';
+import { AwsAuthType, ConnectionConfigProps } from '../types';
 import { awsAuthProviderOptions } from '../providers';
 import { ConfigSection, ConfigSubSection } from '@grafana/experimental';
-import { ConnectionConfigProps, assumeRoleInstructionsStyle } from './ConnectionConfig';
+import { assumeRoleInstructionsStyle } from './ConnectionConfig.styles';
 
 interface NewConnectionConfigProps extends ConnectionConfigProps {
   currentProvider?: SelectableValue<AwsAuthType> | undefined;

src/components/SIGV4ConnectionConfig.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { ConnectionConfig, ConnectionConfigProps } from '../components/ConnectionConfig';
+import { ConnectionConfig } from '../components/ConnectionConfig';
 
-import { AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceJsonData } from '../types';
+import { AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceJsonData, ConnectionConfigProps } from '../types';
 
 export interface SIGV4ConnectionConfigProps extends DataSourcePluginOptionsEditorProps<any, any> {
   inExperimentalAuthComponent?: boolean;

src/components/index.ts

@@ -1,3 +1,2 @@
-export { ConnectionConfig, type ConnectionConfigProps, DEFAULT_LABEL_WIDTH } from './ConnectionConfig';
-export { NewConnectionConfig } from './NewConnectionConfig';
+export { ConnectionConfig, DEFAULT_LABEL_WIDTH } from './ConnectionConfig';
 export { Divider } from './Divider';

src/index.ts

@@ -1,10 +1,16 @@
-export { ConnectionConfig, type ConnectionConfigProps, DEFAULT_LABEL_WIDTH, Divider } from './components';
+export { ConnectionConfig, DEFAULT_LABEL_WIDTH, Divider } from './components';
 export { SIGV4ConnectionConfig } from './components/SIGV4ConnectionConfig';
 export { ConfigSelect, InlineInput } from './sql/ConfigEditor';
 export { ResourceSelector, type ResourceSelectorProps } from './sql/ResourceSelector';
 export { type SQLQuery } from './sql/types';
 export { QueryEditorHeader, QueryCodeEditor, FormatSelect, FillValueSelect, FillValueOptions } from './sql/QueryEditor';
-export * from './sql/utils';
-export * from './types';
-export * from './regions';
-export * from './providers';
+export { filterSQLQuery, applySQLTemplateVariables, appendTemplateVariablesAsSuggestions } from './sql/utils';
+export {
+  AwsAuthType,
+  type AwsAuthDataSourceJsonData,
+  type AwsAuthDataSourceSecureJsonData,
+  type AwsAuthDataSourceSettings,
+  type ConnectionConfigProps,
+} from './types';
+export { standardRegions } from './regions';
+export { awsAuthProviderOptions } from './providers';

src/types.ts

@@ -1,4 +1,4 @@
-import { DataSourceJsonData, DataSourceSettings } from '@grafana/data';
+import type { DataSourceJsonData, DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
 
 export enum AwsAuthType {
   Keys = 'keys',
@@ -28,3 +28,19 @@ export interface AwsAuthDataSourceSecureJsonData {
 }
 
 export type AwsAuthDataSourceSettings = DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;
+
+export interface ConnectionConfigProps<
+  J extends AwsAuthDataSourceJsonData = AwsAuthDataSourceJsonData,
+  S = AwsAuthDataSourceSecureJsonData
+> extends DataSourcePluginOptionsEditorProps<J, S> {
+  standardRegions?: string[];
+  loadRegions?: () => Promise<string[]>;
+  defaultEndpoint?: string;
+  skipHeader?: boolean;
+  skipEndpoint?: boolean;
+  children?: React.ReactNode;
+  labelWidth?: number;
+  inExperimentalAuthComponent?: boolean;
+  externalId?: string;
+  newFormStylingEnabled?: boolean;
+}