Which JavaScript import syntax allows for tree shaking (preferably backwards compatible)?
1.
import Button from '#mui/material/Button'
import TextField from '#mui/material/TextField'
import {Button, TextField} from '#mui/material/'
import * from '#mui/material/'
All of the above
Edit:
The real answer is in the comments section of the marked correct answer.
In your case either 1 or 2, both are fine. These will import only Button,TextField from material.
1.
import Button from '#mui/material/Button'
import TextField from '#mui/material/TextField'
import {Button, TextField} from '#mui/material/'
For third one, I assume you meant
import * as MuiMaterial from '#mui/material/'
This will import everything from material
Related
I recently started learning React.js, I wanted to know is there a way to reduce the many import statements while importing different froms from a common folder in react.js.
Like in the below example, I wan to avoid writing multiplle import statements for importing forms because for the project I have to import more than 100 forms.
import React from 'react'
import form1 from './forms/form1';
import form1 from './forms/form1';
import form2 from './forms/form2';
import form3 from './forms/form3';
import form4 from './forms/form4';
import form5 from './forms/form5';
import form6 from './forms/form6';
import form7 from './forms/form7';
import form8 from './forms/form8';
import form9 from './forms/form9';
import form10 from './forms/form10';
import form11 from './forms/form11';
import form12 from './forms/form12';
import form13 from './forms/form13';
import form14 from './forms/form14';
Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this?
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Grid from "#material-ui/core/Grid";
import Container from "#material-ui/core/Container";
....
or this:
import {Typography, Box, Grid, Container} from "#material-ui/core";
Is there such thing like this? So that I don't need to import each component?
import * from "#material-ui/core"
Thanks in advance! :D
Yes, there is an import all in JavaScript. You can do it like so:
import * as Mui from '#material-ui/core';
This puts all of the named exports of #material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:
<Mui.Typography>Test</Mui.Typography>
You can read more about import here.
The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.
The second option (import * from "#material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using.
Moreover, there is a large scale application you need to import from different sources of Material-ui:
import {} from '#material-ui/core';
import {} from '#material-ui/icons';
import {} from '#mui/material';
A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:
// src/mui/index.js
export { default as MenuItem } from '#material-ui/core/MenuItem';
export { default as TextField } from '#material-ui/core/TextField';
export { default as Select } from '#material-ui/core/Select';
export { default as ClearIcon} from '#material-ui/icons/Clear';
export { default as FormControl } from '#material-ui/core/FormControl';
export { default as Button } from '#mui/material/Button';
...
Then you can import that file wholesale into each component where you need it:
// ../../MyComponent.js
import {
MenuItem,
TextField,
Select,
ClearIcon,
FormControl
} from 'mui';
Now you have a clean import statement and optimized bundle size as well.
Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.
Hi you can do this in following way:
create a folder called collections
create a file called index.js under collections folder
write the following code in index.js
export {default as Button} from "#material-ui/core/Button";
export {default as Card} from "#material-ui/core/Card";
export {default as Paper} from "#material-ui/core/Paper";
now import collection like bellow:
import * as collections from './collections';
Your component file will be as:
import React, {Component} from "react";
import * as collections from './collections';
class Box extends Component {
render() {
return (
<div>
<collections.Button>
Test
</collections.Button>
<collections.Card>test</collections.Card>
<collections.Paper>test</collections.Paper>
</div>
);
}
}
export default Box;
I'm new to React and started exploring bootstrap few days ago. But, whenever I'm trying to import something from react-bootstrap, it's throwing error.
I've already tried reinstalling react-bootstrap. But it doesn't solve the problem. These are my imports:
import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine
The error is in some line in the ThemeProvider.js, which comes with react-bootstrap.
TypeError: Object doesn't support property or method 'createContext'
15 |
16 | var _react = _interopRequireWildcard(require("react"));
17 |
> 18 | var ThemeContext = _react.default.createContext({});
19 |
20 | var Consumer = ThemeContext.Consumer,
21 | Provider = ThemeContext.Provider;
When you import something wrapped around with {}, it refers to something that is exported with an explicit name identifier.
In this case: import {Button} from 'react-bootstrap/Button' would mean that file has explicitly named one of their exports Button. But that's unlikely, because conventionally with these libraries, when you import from a specific file like /Button, they will almost always use a default export instead.
The solution would be to simply get the default export by doing:
import Button from 'react-bootstrap/Button'
With a default export, you can name the import anything you want, even something like this:
import MyButton from 'react-bootstrap/Button'
Alternatively, you can just import from the head folder. In that case, you would actually have to use {} to fetch the named items.
import {Button, Input, Form} from 'react-bootstrap';
try this:
import {Button} from 'react-bootstrap';
or:
import Button from 'react-bootstrap/Button'
and you need to install bootstrap css and import it:
1.
npm install bootstrap
2.
import "bootstrap/dist/css/bootstrap.min.css"
When you are importing a Button or any component wrapped around with curly braces, you do not need to include the component name after the backslash.
simply put
import {Button} from 'react-bootstrap/';
when we import a component without wrapped around with {}, we need to give the component name like this.
import Button from 'react-bootstrap/Button';
Currently I'm having some problem using Drag and Drop keyword in katalon, since the object that I need to drag should be tapped (for like 1 sec) before it pop-out and be moveable but since the "drag and drop" keyword works instantly without any timeout on the first action (drag). Now has anyone tried using a custom keyword for this kind of issue?
Thank you so much in advance.
Currently this is the only code that I am trying to convert in mobile since it was originally created for web, I'm not very sure if I am doing it right.
package aCustomDragmDrop
import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.checkpoint.Checkpoint
import com.kms.katalon.core.checkpoint.CheckpointFactory
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords
import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testcase.TestCase
import com.kms.katalon.core.testcase.TestCaseFactory
import com.kms.katalon.core.testdata.TestData
import com.kms.katalon.core.testdata.TestDataFactory
import com.kms.katalon.core.testobject.ObjectRepository
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords
import internal.GlobalVariable
import MobileBuiltInKeywords as Mobile
import WSBuiltInKeywords as WS
import WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.WebElement
import org.openqa.selenium.WebDriver
import org.openqa.selenium.By
import com.kms.katalon.core.mobile.keyword.internal.MobileDriverFactory
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.testobject.RequestObject
import com.kms.katalon.core.testobject.ResponseObject
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObjectProperty
import com.kms.katalon.core.mobile.helper.MobileElementCommonHelper
import com.kms.katalon.core.util.KeywordUtil
import com.kms.katalon.core.webui.exception.WebElementNotFoundException
import io.appium.java_client.AppiumDriver
import io.appium.java_client.MobileElement
import io.appium.java_client.TouchAction
public class DragDrop {
#Keyword
def dragdrop(TestObject to,TestObject destination,Integer intX,Integer intY) {
def Eleto = MobileElementCommonHelper.findElement(to, timout)
def eledest = MobileElementCommonHelper.findElement(destination, timeout)
TouchAction touchAction = new TouchAction(driver)
touchAction.moveToElement(eleto)
touchAction.waitAction(WaitOptions.waitOptions(Duration.ofMillis(2000)))
touchAction.perform()
touchAction.moveToElement(eledest,intX, intY)
touchAction.release()
touchAction.perform();
}
}
Trying to use react-data-tables here and getting errors left right and center. Going crazy.
After following the instructions as per https://github.com/adazzle/react-data-grid and using the code samples from http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid I am having the following issues.
If I use this in my file
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';
var Toolbar = ReactDataGridPlugins.Toolbar;
var Selectors = ReactDataGridPlugins.Data.Selectors;
I get a "Cannot read property 'Toolbar' of undefined.
If I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import Toolbar from 'react-data-grid/addons';
import Selectors from 'react-data-grid/addons';
I get the following error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HostProviderList.
And if I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import {Toolbar} from 'react-data-grid/addons';
import {Selectors} from 'react-data-grid/addons';
I get this error
Warning: Unknown props onGridSort, columns, rowGetter, rowsCount, minHeight, onRowUpdated, toolbar, onAddFilter, minColumnWidth, columnEquality, enableCellSelect, rowHeight, enableRowSelect, rowKey, rowScrollTimeout, cellNavigationMode, headerRows, columnMetrics, cellMetaData, selectedRows, rowSelection, expandedRows, rowOffsetHeight, sortColumn, sortDirection, onSort, totalWidth, onViewportKeydown, onViewportKeyup, onViewportDragStart, onViewportDragEnd, onViewportDoubleClick, onColumnResize on tag. Remove these props from the element.
I am not sure what to do here. If I do just the basic data-grid as per the online example it works fine. However as soon as I try anything with the addons.jsx file it fails.
On a side note
nmp install react-data-grid/addons
does not work. The git repo is not found. However I do see that after doing an npm install of react-data-grid I do have a addons.jsx file that imports dist/react-data-grid.ui-plugins.js
The right way to import is
import { Toolbar, Data } from 'react-data-grid/addons';
const Selectors = Data.Selectors;