问:
Laravel websockets `Failed to connect to Pusher.`
I have the following problem with my websocket setup on local:
Once an event arrives at the backend, I want to trigger another event from the backend side.
But for some reason, the websocket terminal is telling me, that the connection to pusher failed. and after that message, the event i want to trigger is fired anyway.
my Question: What is causing the connection error?

Setup:
.env:

```<code>PUSHER_APP_ID=1234
PUSHER_APP_KEY=ABCDEFG
PUSHER_APP_SECRET=HIJKLMNOP
PUSHER_APP_CLUSTER=mt1
</code>```

websockets.php:

```<code>    'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'capacity' => null,
        'enable_client_messages' => false,
        'enable_statistics' => true,
    ],
],
</code>```

broadcasting.php:

```<code>        'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            //'useTLS' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http',
            'timeout' => 1
        ],
    ],
</code>```

Versions:

```<code>"php": "^7.3|^8.0",
    "beyondcode/laravel-websockets": "1.12",
    "fideloper/proxy": "4.4",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.54",
    "laravel/tinker": "^2.5",
    "laravel/ui": "^3.1",
    "tymon/jwt-auth": "^1.0",
    "pusher/pusher-php-server": "^4.0"
</code>```

I dont get what is trying to connect and why is the event fired after the timeout?

Regards

答:
on local change to 'useTLS' => false,

It should be like the following

```<code>'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => false,
        ],
    ],
    ....
</code>```

Body:
I have the following problem with my websocket setup on local:
Once an event arrives at the backend, I want to trigger another event from the backend side.
But for some reason, the websocket terminal is telling me, that the connection to pusher failed. and after that message, the event i want to trigger is fired anyway.
my Question: What is causing the connection error?

Setup:
.env:

PUSHER_APP_ID=1234
PUSHER_APP_KEY=ABCDEFG
PUSHER_APP_SECRET=HIJKLMNOP
PUSHER_APP_CLUSTER=mt1

websockets.php:

    'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'capacity' => null,
        'enable_client_messages' => false,
        'enable_statistics' => true,
    ],
],

broadcasting.php:

        'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            //'useTLS' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http',
            'timeout' => 1
        ],
    ],

Versions:

"php": "^7.3|^8.0",
    "beyondcode/laravel-websockets": "1.12",
    "fideloper/proxy": "4.4",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.54",
    "laravel/tinker": "^2.5",
    "laravel/ui": "^3.1",
    "tymon/jwt-auth": "^1.0",
    "pusher/pusher-php-server": "^4.0"

I dont get what is trying to connect and why is the event fired after the timeout?

Regards

Body:
on local change to 'useTLS' => false,

It should be like the following

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => false,
        ],
    ],
    ....


来源: stackexchange

问:
How to toggle between booleans (in a list or tuple)?

i = True
j = False
t = (i,j)
for i in t:
    if i:
        i = not i

print (t)
(True, False)
```

For example, I want to change all values in a tuple to False, no matter the element was True or False before. How can I realise that?

答:
You need to create a new Tuple.

In fact it seems you need a Tuple with only False in it:

i = True
j = False
t = (i,j)
t = Tuple([False] * len(t))
```

ContentLicense: CC BY-SA 4.0

Body:
i = True
j = False
t = (i,j)
for i in t:
    if i:
        i = not i

print (t)
(True, False)

For example, I want to change all values in a tuple to False, no matter the element was True or False before. How can I realise that?


问:
Flex 4 Spark component Panel - Hide Title Bar
I have used Spark panel to display the object inside a container. The panel and the inside elements are created dynamically. (using ActionScript). I need to remove the title bar of the panel in actionscript. When I tried to remove that, I am unable to hide the same.

Tried below ways.

Used style (classname) and set headerheight = 0.

Override the panel component and used the property this.titleBar.visible = false.

But not able to hide the titlebar.

I have used Panel spark component and Flash Builder 4.5 for development.

If there is any other way to achieve this, please let me know.

答:
Your best bet is to create a custom skin and move the title bar pieces from the skin.  It was very quick to put together a sample.

This is your custom skin; created as a copy of the PanelSkin with visual elements commented out.

```<code><?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark Panel container.

    @see spark.components.Panel

    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">

    <fx:Metadata>
        <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[
        import mx.core.FlexVersion;

        /* Define the skin elements that should not be colorized.
        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];

        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
        static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array
        {
            // Since border is styleable via borderColor, no need to allow chromeColor to affect
            // the border.  This is wrapped in a compatibility flag since this change was added
            // in Flex 4.5
            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
            {
                return exclusions_4_0;
            }

            return exclusions;
        }

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        /**
         * @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            }
            else
            {
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            }

            dropShadow.visible = getStyle("dropShadowVisible");

            var cr:Number = getStyle("cornerRadius");
            var withControls:Boolean =
                (currentState == "disabledWithControlBar" ||
                 currentState == "normalWithControlBar");

            if (cornerRadius != cr)
            {
                cornerRadius = cr;

                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;

                setPartCornerRadii(topMaskRect, withControls);
                setPartCornerRadii(border, withControls);
                setPartCornerRadii(background, withControls);
            }

            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);

            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        /**
         * @private
         */
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
        {
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        }

        private var cornerRadius:Number;
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>

    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <!--- @private -->
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">

        <!-- top group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <!--- @private -->
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- bottom group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <!--- @private -->
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- layer 1: border -->
        <!--- @private -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>

        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- @private
                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>

        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>

            <!--- @private -->
<!--            <s:Group id="topGroup" mask="{topGroupMask}">
-->
                <!-- layer 0: title bar fill -->
                <!--- @private -->
<!--                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
-->
                <!-- layer 1: title bar highlight -->
                <!--- @private -->
<!--                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
-->
                <!-- layer 2: title bar divider -->
                <!--- @private -->
<!--                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
-->
                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
<!--                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" textAlign="start" fontWeight="bold">
                </s:Label>
-->
<!--            </s:Group>
-->
            <!--
                Note: setting the minimum size to 0 here so that changes to the host component's
                size will not be thwarted by this skin part's minimum size.   This is a compromise,
                more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>

            <!--- @private -->
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >

                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">

                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>

                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>

                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <!--- @copy spark.components.Panel#controlBarGroup -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:SparkSkin>
</code>```

And this is the app:

```<code><?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:VGroup>
        <s:Panel />
        <s:Panel skinClass="PanelNoTitleBar"/>
    </s:VGroup>

</s:WindowedApplication>
</code>```

The first panel will display the original skin; the second panel displays the custom skin; with no title bar.

ContentLicense: CC BY-SA 3.0

Body:
Your best bet is to create a custom skin and move the title bar pieces from the skin.  It was very quick to put together a sample.

This is your custom skin; created as a copy of the PanelSkin with visual elements commented out.

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark Panel container.

    @see spark.components.Panel

    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">

    <fx:Metadata>
        <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[
        import mx.core.FlexVersion;

        /* Define the skin elements that should not be colorized.
        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];

        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
        static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array
        {
            // Since border is styleable via borderColor, no need to allow chromeColor to affect
            // the border.  This is wrapped in a compatibility flag since this change was added
            // in Flex 4.5
            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
            {
                return exclusions_4_0;
            }

            return exclusions;
        }

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        /**
         * @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            }
            else
            {
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            }

            dropShadow.visible = getStyle("dropShadowVisible");

            var cr:Number = getStyle("cornerRadius");
            var withControls:Boolean =
                (currentState == "disabledWithControlBar" ||
                 currentState == "normalWithControlBar");

            if (cornerRadius != cr)
            {
                cornerRadius = cr;

                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;

                setPartCornerRadii(topMaskRect, withControls);
                setPartCornerRadii(border, withControls);
                setPartCornerRadii(background, withControls);
            }

            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);

            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        /**
         * @private
         */
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
        {
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        }

        private var cornerRadius:Number;
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>

    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <!--- @private -->
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">

        <!-- top group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <!--- @private -->
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- bottom group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <!--- @private -->
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- layer 1: border -->
        <!--- @private -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>

        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- @private
                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>

        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>

            <!--- @private -->
<!--            <s:Group id="topGroup" mask="{topGroupMask}">
-->
                <!-- layer 0: title bar fill -->
                <!--- @private -->
<!--                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
-->
                <!-- layer 1: title bar highlight -->
                <!--- @private -->
<!--                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
-->
                <!-- layer 2: title bar divider -->
                <!--- @private -->
<!--                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
-->
                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
<!--                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" textAlign="start" fontWeight="bold">
                </s:Label>
-->
<!--            </s:Group>
-->
            <!--
                Note: setting the minimum size to 0 here so that changes to the host component's
                size will not be thwarted by this skin part's minimum size.   This is a compromise,
                more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>

            <!--- @private -->
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >

                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">

                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>

                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>

                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <!--- @copy spark.components.Panel#controlBarGroup -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:SparkSkin>

And this is the app:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:VGroup>
        <s:Panel />
        <s:Panel skinClass="PanelNoTitleBar"/>
    </s:VGroup>

</s:WindowedApplication>

The first panel will display the original skin; the second panel displays the custom skin; with no title bar.


问:
XSLT changing a node via a named template call from within a different node
Edit: the error was in a wrong when condition.

Source xml:

```<code><?xml version="1.0" encoding="UTF-8"?>
<mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>
</code>```

Expected trasnformed xml:

```<code><?xml version="1.0" encoding="UTF-8"?>
<mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>
</code>```

That is, when a levelTwoNode node nested into a value node with attribute name "triggeringValue" is encountered, all the levelTwoNode nodes in the document with the same attributeOne and attributeTwo as the triggering node's should be injected with the attribute injectedAttribute="triggeringValue".

I am using this xslt:

```<code><?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

    <xsl:output encoding="Windows-1252" method="xml" indent="no" omit-xml-declaration="no" />

    <!-- Copy the whole output -->
    <xsl:template match="@* |node() ">
        <xsl:copy>
            <xsl:apply-templates select="@* |node() "/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="//levelOneNodes/levelOneNode/value/levelTwoNodes/levelTwoNode" >

        <xsl:call-template name="myTemplate">

            <xsl:with-param name="myAttrOne" select=" current()/@attributeOne " />
            <xsl:with-param name="myAttrTwo" select=" current()/@attributeTwo " />
            <xsl:with-param name="myValue" select=" current()/../../@name " />

        </xsl:call-template>

    </xsl:template>

    <xsl:template name="myTemplate">

        <xsl:param name="myAttrOne" />
        <xsl:param name="myAttrTwo" />
        <xsl:param name="myValue" />

        <xsl:choose>

            <xsl:when test="boolean(//levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)]) and boolean($myValue = 'triggeringValue')">

                <xsl:copy>

                    <xsl:attribute name="injectedAttribute"><xsl:value-of select="$myValue"/></xsl:attribute>
                    <xsl:apply-templates select="@* |node() "/>

                </xsl:copy>

            </xsl:when>

            <xsl:otherwise>

                <xsl:copy>

                    <xsl:apply-templates select="@* |node() "/>

                </xsl:copy>

            </xsl:otherwise>
        </xsl:choose>

    </xsl:template>

</xsl:stylesheet>
</code>```

that results in this xml:

```<code><?xml version="1.0" encoding="Windows-1252"?><mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>
</code>```

where the new attribute injectedAttribute is not injected into the first levelTwoNode of the second levelOneNode (the one with the child node value with attribute name "anotherValue") even though it has the same attributeOne and attributeTwo (with value "A") of one of the levelTwoNode nodes inside the first levelOneNode node (the one with the child node value with attribute name "triggeringValue"). The attribute injectedAttribute is injected only in all the levelTwoNode nodes inside the triggeringValue value node.

Why does this condition:

```<code><xsl:when test="boolean(//levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)]) and boolean($myValue = 'triggeringValue')">
</code>```

is limited in the scope of the calling node? The query //levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)] should fetch all levelTwoNode nodes with the passed attributes and the condition $myValue = 'triggeringValue' should not limit that query.

What am I missing?

Thanks for any help.

答: You say "the condition $myValue = 'triggeringValue' should not limit that query" but it should. The variable $myValue is bound to current()/../../@name and I think you will find its value is "anotherValue".

Body:
Edit: the error was in a wrong when condition.

Source xml:

<?xml version="1.0" encoding="UTF-8"?>
<mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>

Expected trasnformed xml:

<?xml version="1.0" encoding="UTF-8"?>
<mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>

That is, when a levelTwoNode node nested into a value node with attribute name "triggeringValue" is encountered, all the levelTwoNode nodes in the document with the same attributeOne and attributeTwo as the triggering node's should be injected with the attribute injectedAttribute="triggeringValue".

I am using this xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

    <xsl:output encoding="Windows-1252" method="xml" indent="no" omit-xml-declaration="no" />

    <xsl:template match="@* |node() ">
        <xsl:copy>
            <xsl:apply-templates select="@* |node() "/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="//levelOneNodes/levelOneNode/value/levelTwoNodes/levelTwoNode" >

        <xsl:call-template name="myTemplate">

            <xsl:with-param name="myAttrOne" select=" current()/@attributeOne " />
            <xsl:with-param name="myAttrTwo" select=" current()/@attributeTwo " />
            <xsl:with-param name="myValue" select=" current()/../../@name " />

        </xsl:call-template>

    </xsl:template>

    <xsl:template name="myTemplate">

        <xsl:param name="myAttrOne" />
        <xsl:param name="myAttrTwo" />
        <xsl:param name="myValue" />

        <xsl:choose>

            <xsl:when test="boolean(//levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)]) and boolean($myValue = 'triggeringValue')">

                <xsl:copy>

                    <xsl:attribute name="injectedAttribute"><xsl:value-of select="$myValue"/></xsl:attribute>
                    <xsl:apply-templates select="@* |node() "/>

                </xsl:copy>

            </xsl:when>

            <xsl:otherwise>

                <xsl:copy>

                    <xsl:apply-templates select="@* |node() "/>

                </xsl:copy>

            </xsl:otherwise>
        </xsl:choose>

    </xsl:template>

</xsl:stylesheet>

that results in this xml:

<?xml version="1.0" encoding="Windows-1252"?><mainNode>
   <levelOneNodes>
      <levelOneNode>
         <value name="triggeringValue">
            <levelTwoNodes>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="B1" attributeTwo="B1" attributeThree="B1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode injectedAttribute="triggeringValue" attributeOne="C1" attributeTwo="C1" attributeThree="C1">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
      <levelOneNode>
         <value name="anotherValue">
            <levelTwoNodes>
               <levelTwoNode attributeOne="A" attributeTwo="A" attributeThree="A">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="B2" attributeTwo="B2" attributeThree="B2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
               <levelTwoNode attributeOne="C2" attributeTwo="C2" attributeThree="C2">
                  <textData>This is some text.</textData>
               </levelTwoNode>
            </levelTwoNodes>
         </value>
      </levelOneNode>
    </levelOneNodes>
</mainNode>

where the new attribute injectedAttribute is not injected into the first levelTwoNode of the second levelOneNode (the one with the child node value with attribute name "anotherValue") even though it has the same attributeOne and attributeTwo (with value "A") of one of the levelTwoNode nodes inside the first levelOneNode node (the one with the child node value with attribute name "triggeringValue"). The attribute injectedAttribute is injected only in all the levelTwoNode nodes inside the triggeringValue value node.

Why does this condition:

<xsl:when test="boolean(//levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)]) and boolean($myValue = 'triggeringValue')">

is limited in the scope of the calling node? The query //levelTwoNode[(@attributeOne = $myAttrOne) and (@attributeTwo = $myAttrTwo)] should fetch all levelTwoNode nodes with the passed attributes and the condition $myValue = 'triggeringValue' should not limit that query.

What am I missing?

Thanks for any help.


问:
Is there any way to get this order by query to start searching from the given timestamp on a MySQL index?
I am working on a mysql 5.6 database, and I have a table looking something like this:

```<code>CREATE TABLE `items` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `account_id` int(11) NOT NULL,
  `node_type_id` int(11) NOT NULL,
  `property_native_id` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `parent_item_id` bigint(20) DEFAULT NULL,
  `external_timestamp` datetime DEFAULT NULL,
  `created_at` datetime DEFAULT NULL,
  `updated_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `index_items_on_acct_node_prop` (`account_id`,`node_type_id`,`property_native_id`),
  KEY `index_items_on_account_id_and_external_timestamp` (`account_id`,`external_timestamp`),
  KEY `index_items_on_account_id_and_created_at` (`account_id`,`created_at`),
  KEY `parent_item_external_timestamp_idx` (`parent_item_id`,`external_timestamp`),
) ENGINE=InnoDB AUTO_INCREMENT=194417315 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
</code>```

I am trying to optimize a query doing this:

```<code>SELECT *
FROM items
WHERE parent_item_id = ?
AND external_timestamp < ( SELECT external_timestamp
                           FROM items
                           WHERE id = ?
                          ) FROM items ORDER BY
external_timestamp LIMIT 5
</code>```

Currently, there is an index on parent_item_id, so when I run this query with EXPLAIN, I get an "extra" of "Using where; Using filesort"

When I modify the index to be (parent_item_id, external_timestamp), then the EXPLAIN's "extra" becomes "Using index condition"

The problem is that the EXPLAIN's "rows" field is still the same (which is usually a couple thousand rows, but it could be millions in some use-cases).

I know that I can do something like AND external_timestamp > (1 week ago) or something like that, but I'd really like the number of rows to be just the number of LIMIT, so 5 in that case.

Is it possible to instruct the database to lock onto a row and then get the 5 rows before it on that (parent_item_id, external_timestamp) index?

答:
SELECT items.*
FROM items
CROSS JOIN ( SELECT external_timestamp
             FROM items
             WHERE id = ? ) subquery
WHERE items.parent_item_id = ?
AND items.external_timestamp < subquery.external_timestamp
ORDER BY external_timestamp LIMIT 5
```

id is PK, hence the subquery will return only one row (or none).

Body:
I am working on a mysql 5.6 database, and I have a table looking something like this:

CREATE TABLE `items` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `account_id` int(11) NOT NULL,
  `node_type_id` int(11) NOT NULL,
  `property_native_id` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `parent_item_id` bigint(20) DEFAULT NULL,
  `external_timestamp` datetime DEFAULT NULL,
  `created_at` datetime DEFAULT NULL,
  `updated_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `index_items_on_acct_node_prop` (`account_id`,`node_type_id`,`property_native_id`),
  KEY `index_items_on_account_id_and_external_timestamp` (`account_id`,`external_timestamp`),
  KEY `index_items_on_account_id_and_created_at` (`account_id`,`created_at`),
  KEY `parent_item_external_timestamp_idx` (`parent_item_id`,`external_timestamp`),
) ENGINE=InnoDB AUTO_INCREMENT=194417315 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

I am trying to optimize a query doing this:

SELECT *
FROM items
WHERE parent_item_id = ?
AND external_timestamp < ( SELECT external_timestamp
                           FROM items
                           WHERE id = ?
                          ) FROM items ORDER BY
external_timestamp LIMIT 5

Currently, there is an index on parent_item_id, so when I run this query with EXPLAIN, I get an "extra" of "Using where; Using filesort"

When I modify the index to be (parent_item_id, external_timestamp), then the EXPLAIN's "extra" becomes "Using index condition"

The problem is that the EXPLAIN's "rows" field is still the same (which is usually a couple thousand rows, but it could be millions in some use-cases).

I know that I can do something like AND external_timestamp > (1 week ago) or something like that, but I'd really like the number of rows to be just the number of LIMIT, so 5 in that case.

Is it possible to instruct the database to lock onto a row and then get the 5 rows before it on that (parent_item_id, external_timestamp) index?

Body:
SELECT items.*
FROM items
CROSS JOIN ( SELECT external_timestamp
             FROM items
             WHERE id = ? ) subquery
WHERE items.parent_item_id = ?
AND items.external_timestamp < subquery.external_timestamp
ORDER BY external_timestamp LIMIT 5

id is PK, hence the subquery will return only one row (or none).


问:
Sanitizing a file path in python
I have a file browser application that exposes a directory and its contents to the users.

I want to sanitize the user input, which is a file path, so that it does not allow absolute paths such as '/tmp/' and relative paths such as '../../etc'

Is there a python function that does this across platforms?

答:
To be very specific to the question asked but raise an exception rather than converting the path to relative:</p>
```<code>path = 'your/path/../../to/reach/root'
if '../' in path or path[:1] == '/':
    raise Exception
</code>```

Title: Sanitizing a file path in python

Body:
To be very specific to the question asked but raise an exception rather than converting the path to relative:

path = 'your/path/../../to/reach/root'
if '../' in path or path[:1] == '/':
    raise Exception


问:
Page scrolls up using JQuery fadeIn - fadeOut
Hi I use the following code to create a slideshow with multiple DIV elements:

```<code>var $ = jQuery.noConflict();
function fadeContent() {
  $(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
    $(this).appendTo($(this).parent());
    fadeContent();
  });
}
fadeContent();
</code>```

The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!

What can I do to prevent this?

答: I think when the element fades out it does not take a real estate on the page. The element beneath it will take its place and you feel like the page scrolled. You can have a wrapper to the element you are trying to fadeIn/fadeOut and provide an appropriate height to this wrapper element. But this is not a good UX because when the element will fadeOut there will be empty section on the page.</p>

Body:
Hi I use the following code to create a slideshow with multiple DIV elements:

var $ = jQuery.noConflict();
function fadeContent() {
  $(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
    $(this).appendTo($(this).parent());
    fadeContent();
  });
}
fadeContent();

The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!

What can I do to prevent this?


问:
Is there any way to extract the value of P/E ration in the given html code from a web page
I am working on a web scrapping project and I need to extract the value of P/E from the given html code through a website. This has to be dynamic in nature. The ticker I have used is IDEA and I am also enclosing the code I have used. I also want to extract values of sales growth for 1 year, 3 year and 5 year from the HTML code next to the below html code.

This on is for PE ratio

    P/E
        <svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
            <path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
        </svg>

    5.16

```
<p>This is for the sales growth</p>
<pre class="lang-html prettyprint-override"><code><div class="w-100">
    <div class="ratiosingle">
        <span class="duration">1 Year</span>
        <span class="durationvalue">-27.09%</span>
    </div>
    <div class="ratiosingle">
        <span class="duration">3 Year</span>
        <span class="durationvalue">-5.38%</span>
    </div>
    <div class="ratiosingle">
        <span class="duration">5 Year</span>
        <span class="durationvalue">1.05%</span>
    </div>
</div>
</code>```

import pandas as pd
from bs4 import BeautifulSoup
import requests
a=input("Enter symbol of the company\n")
url="https://ticker.finology.in/company/"+a
print(url)
response=requests.get(url)
soup=BeautifulSoup(response.text,'html.parser')
CP = soup.find("div", {"id":"mainContent_clsprice"}).find("span", {"class": "Number"}).getText()
```

答:
You could try something like this:</p>
```<code>import requests
from bs4 import BeautifulSoup

with requests.Session() as session:
    for ticker in ['IDEA', 'TIMEXWATCH', 'OFSS']:
        (r := session.get(f'https://ticker.finology.in/company/{ticker}')).raise_for_status()
        soup = BeautifulSoup(r.content, 'lxml')
        pe = soup.find(id='mainContent_updAddRatios').find_all('div')[3].find('p').text.strip()
        print(f'P/E for {ticker} = {pe}')
</code>```

Body:
I am working on a web scrapping project and I need to extract the value of P/E from the given html code through a website. This has to be dynamic in nature. The ticker I have used is IDEA and I am also enclosing the code I have used. I also want to extract values of sales growth for 1 year, 3 year and 5 year from the HTML code next to the below html code.

This on is for PE ratio

    P/E
        <svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
            <path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
        </svg>

    5.16

This is for the sales growth

        1 Year
        -27.09%

        3 Year
        -5.38%

        5 Year
        1.05%

import pandas as pd
from bs4 import BeautifulSoup
import requests
a=input("Enter symbol of the company\n")
url="https://ticker.finology.in/company/"+a
print(url)
response=requests.get(url)
soup=BeautifulSoup(response.text,'html.parser')
CP = soup.find("div", {"id":"mainContent_clsprice"}).find("span", {"class": "Number"}).getText()

Body:
You could try something like this:

import requests
from bs4 import BeautifulSoup

with requests.Session() as session:
    for ticker in ['IDEA', 'TIMEXWATCH', 'OFSS']:
        (r := session.get(f'https://ticker.finology.in/company/{ticker}')).raise_for_status()
        soup = BeautifulSoup(r.content, 'lxml')
        pe = soup.find(id='mainContent_updAddRatios').find_all('div')[3].find('p').text.strip()
        print(f'P/E for {ticker} = {pe}')


问:
Monaco Editor: Cannot find module 'monaco-editor' but it's installed
I'm making a desktop application using electron and I decided to use Monaco Editor and install it using npm install monaco-editor but when I run the application it says Cannot find module 'monaco-editor'

I used electron-react-boilerplate as a boilerplate.

I tried both methods for installing it using ESM

This is my package.json:

```<code>{
      "name": "electron-react-boilerplate",
      "productName": "ElectronReact",
      "version": "0.17.1",
      "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
      "scripts": {
        "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
        "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
        "build-e2e": "cross-env E2E_BUILD=true yarn build",
        "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
        "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
        "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
        "flow": "flow",
        "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
        "lint": "cross-env NODE_ENV=development eslint --cache --format=pretty .",
        "lint-fix": "yarn --silent lint --fix; exit 0",
        "lint-styles": "stylelint --ignore-path .eslintignore '**/*.*(css|scss)' --syntax scss",
        "lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
        "package": "yarn build && electron-builder build --publish never",
        "package-all": "yarn build && electron-builder build -mwl",
        "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
        "package-linux": "yarn build && electron-builder build --linux",
        "package-win": "yarn build && electron-builder build --win --x64",
        "postinstall": "yarn flow-typed && electron-builder install-app-deps package.json && yarn build-dll && opencollective-postinstall",
        "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{js,jsx,json,html,css,less,scss,yml}'",
        "postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
        "preinstall": "node ./internals/scripts/CheckYarn.js",
        "prestart": "yarn build",
        "start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
        "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/main.dev.js",
        "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
        "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
        "test-all": "yarn lint && yarn flow && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
        "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe electron:./ ./test/e2e/HomePage.e2e.js",
        "test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe-live electron:./ ./test/e2e/HomePage.e2e.js",
        "test-watch": "yarn test --watch"
      },
      "lint-staged": {
        "*.{js,jsx}": [
          "cross-env NODE_ENV=development eslint --cache --format=pretty",
          "git add"
        ],
        "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
          "prettier --ignore-path .eslintignore --parser json --write",
          "git add"
        ],
        "*.{css,scss}": [
          "stylelint --ignore-path .eslintignore --syntax scss --fix",
          "prettier --ignore-path .eslintignore --single-quote --write",
          "git add"
        ],
        "*.{html,md,yml}": [
          "prettier --ignore-path .eslintignore --single-quote --write",
          "git add"
        ]
      },
      "main": "./app/main.prod.js",
      "build": {
        "productName": "ElectronReact",
        "appId": "org.develar.ElectronReact",
        "files": [
          "app/dist/",
          "app/app.html",
          "app/main.prod.js",
          "app/main.prod.js.map",
          "package.json"
        ],
        "dmg": {
          "contents": [
            {
              "x": 130,
              "y": 220
            },
            {
              "x": 410,
              "y": 220,
              "type": "link",
              "path": "/Applications"
            }
          ]
        },
        "win": {
          "target": [
            "nsis",
            "msi"
          ]
        },
        "linux": {
          "target": [
            "deb",
            "rpm",
            "snap",
            "AppImage"
          ],
          "category": "Development"
        },
        "directories": {
          "buildResources": "resources",
          "output": "release"
        },
        "publish": {
          "provider": "github",
          "owner": "electron-react-boilerplate",
          "repo": "electron-react-boilerplate",
          "private": false
        }
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
      },
      "author": {
        "name": "Electron React Boilerplate Maintainers",
        "email": "electronreactboilerplate@gmail.com",
        "url": "https://electron-react-boilerplate.js.org"
      },
      "contributors": [
        {
          "name": "Vikram Rangaraj",
          "email": "vikr01@icloud.com",
          "url": "https://github.com/vikr01"
        },
        {
          "name": "Amila Welihinda",
          "email": "amilajack@gmail.com",
          "url": "https://github.com/amilajack"
        }
      ],
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
      },
      "keywords": [
        "electron",
        "boilerplate",
        "react",
        "redux",
        "flow",
        "sass",
        "webpack",
        "hot",
        "reload"
      ],
      "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
      "jest": {
        "testURL": "http://localhost/",
        "moduleNameMapper": {
          "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
          "\\.(css|less|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
          "js",
          "jsx",
          "json"
        ],
        "transform": {
          "^.+\\.jsx?$": "babel-jest"
        },
        "setupFiles": [
          "./internals/scripts/CheckBuiltsExist.js"
        ]
      },
      "devDependencies": {
        "@babel/core": "^7.4.0",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "@babel/plugin-proposal-decorators": "^7.4.0",
        "@babel/plugin-proposal-do-expressions": "^7.2.0",
        "@babel/plugin-proposal-export-default-from": "^7.2.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
        "@babel/plugin-proposal-function-bind": "^7.2.0",
        "@babel/plugin-proposal-function-sent": "^7.2.0",
        "@babel/plugin-proposal-json-strings": "^7.2.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
        "@babel/plugin-proposal-numeric-separator": "^7.2.0",
        "@babel/plugin-proposal-optional-chaining": "^7.2.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
        "@babel/plugin-proposal-throw-expressions": "^7.2.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/plugin-syntax-import-meta": "^7.2.0",
        "@babel/plugin-transform-react-constant-elements": "^7.2.0",
        "@babel/plugin-transform-react-inline-elements": "^7.2.0",
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.4.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^10.0.1",
        "babel-jest": "^24.5.0",
        "babel-loader": "^8.0.5",
        "babel-plugin-dev-expression": "^0.2.1",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
        "chalk": "^2.4.2",
        "concurrently": "^4.1.0",
        "cross-env": "^5.2.0",
        "cross-spawn": "^6.0.5",
        "css-loader": "^3.1.0",
        "detect-port": "^1.3.0",
        "electron": "^4.1.3",
        "electron-builder": "^20.39.0",
        "electron-devtools-installer": "^2.2.4",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "^1.11.2",
        "enzyme-to-json": "^3.3.5",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-config-erb": "^0.0.2",
        "eslint-config-prettier": "^4.1.0",
        "eslint-formatter-pretty": "^2.1.1",
        "eslint-import-resolver-webpack": "^0.11.0",
        "eslint-plugin-compat": "^3.1.0",
        "eslint-plugin-flowtype": "^3.4.2",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-jest": "^22.4.1",
        "eslint-plugin-jsx-a11y": "6.2.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.1.1",
        "eslint-plugin-react": "^7.12.4",
        "eslint-plugin-testcafe": "^0.2.1",
        "fbjs-scripts": "^1.2.0",
        "file-loader": "^3.0.1",
        "flow-bin": "^0.95.1",
        "flow-runtime": "^0.17.0",
        "flow-typed": "^2.5.1",
        "husky": "^1.3.1",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^24.5.0",
        "lint-staged": "^8.1.5",
        "mini-css-extract-plugin": "^0.5.0",
        "node-sass": "^4.11.0",
        "opencollective-postinstall": "^2.0.2",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "prettier": "^1.16.4",
        "react-test-renderer": "^16.8.6",
        "redux-logger": "^3.0.6",
        "rimraf": "^2.6.3",
        "sass-loader": "^7.1.0",
        "sinon": "^7.3.1",
        "spectron": "^5.0.0",
        "style-loader": "^0.23.1",
        "stylelint": "^9.10.1",
        "stylelint-config-prettier": "^5.0.0",
        "stylelint-config-standard": "^18.2.0",
        "terser-webpack-plugin": "^1.2.3",
        "testcafe": "^1.1.0",
        "testcafe-browser-provider-electron": "^0.0.8",
        "testcafe-live": "^0.1.4",
        "testcafe-react-selectors": "^3.1.0",
        "url-loader": "^1.1.2",
        "webpack": "^4.29.6",
        "webpack-bundle-analyzer": "^3.1.0",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1",
        "webpack-merge": "^4.2.1",
        "yarn": "^1.15.2"
      },
      "dependencies": {
        "@fortawesome/fontawesome-free": "^5.8.1",
        "@material-ui/core": "^4.2.1",
        "@material-ui/icons": "^4.2.1",
        "axios": "^0.19.0",
        "classnames": "^2.2.6",
        "connected-react-router": "^6.3.2",
        "core-js": "2",
        "devtron": "^1.4.0",
        "electron-debug": "^2.1.0",
        "electron-log": "^3.0.4",
        "electron-store": "^4.0.0",
        "electron-updater": "^4.0.6",
        "history": "^4.9.0",
        "monaco-editor": "^0.19.2",
        "monaco-editor-webpack-plugin": "^1.8.2",
        "prop-types": "^15.7.2",
        "react": "^16.8.6",
        "react-copy-to-clipboard": "^5.0.1",
        "react-dom": "^16.8.6",
        "react-hot-loader": "^4.8.2",
        "react-panelgroup": "^1.0.7",
        "react-redux": "^6.0.1",
        "react-resize-observer": "^1.1.1",
        "react-router": "^5.0.0",
        "react-router-dom": "^5.0.0",
        "react-simple-resizer": "^1.3.1",
        "react-tabs": "^3.1.0",
        "react-virtualized-auto-sizer": "^1.0.2",
        "react-window": "^1.8.5",
        "redux": "^4.0.1",
        "redux-promise-middleware": "^6.1.1",
        "redux-thunk": "^2.3.0",
        "shell-quote": "^1.7.2",
        "source-map-support": "^0.5.11",
        "ssh2": "^0.8.5",
        "xterm": "^3.14.5"
      },
      "devEngines": {
        "node": ">=7.x",
        "npm": ">=4.x",
        "yarn": ">=0.21.3"
      },
      "collective": {
        "url": "https://opencollective.com/electron-react-boilerplate-594"
      },
      "browserslist": "electron 1.6"
    }
</code>```

I tried with no luck using different versions of monaco-editor and monaco-editor-webpack-plugin as suggested here

This is my webpack config, well the webpack.config of electron-react-boilerplate is kind of messy and maybe there is the error, here is a link of all the config files for webpack used by electron-react-boilerplate I've only changed that file thought.

```<code>    /**
     * Base webpack config used across other specific configs
     */

    import path from 'path';
    import webpack from 'webpack';
    import { dependencies } from '../package.json';

    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

    export default {
      externals: [...Object.keys(dependencies || {})],

      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true
              }
            }
          },
          {
            test: /\.(ts|tsx)$/,
            exclude: /node_modules/,
            loader: 'ts-loader'
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          }
        ]
      },
      // entry: {
      //  // "app": './index.js',
      //  // Package each language's worker and give these filenames in `getWorkerUrl`
      //  "editor.worker": 'node_modules/monaco-editor/esm/vs/editor/editor.worker.js',
      //  "json.worker": 'node_modules/monaco-editor/esm/vs/language/json/json.worker',
      //  "css.worker": 'node_modules/monaco-editor/esm/vs/language/css/css.worker',
      //  "html.worker": 'node_modules/monaco-editor/esm/vs/language/html/html.worker',
      //  "ts.worker": 'node_modules/monaco-editor/esm/vs/language/typescript/ts.worker',
      // },

      output: {
        path: path.join(__dirname, '..', 'app'),
        // https://github.com/webpack/webpack/issues/1114
        libraryTarget: 'commonjs2'
      },

      /**
       * Determine the array of extensions that should be used to resolve modules.
       */
      resolve: {
        extensions: ['.js', '.tsx', '.ts', '.jsx', '.json']
      },

      plugins: [
        new webpack.EnvironmentPlugin({
          NODE_ENV: 'production'
        }),
        new MonacoWebpackPlugin(),
        new webpack.NamedModulesPlugin()
      ]
    };
</code>```

For completeness, I'm importing Monaco Editor like so: import * as Monaco from 'monaco-editor' if I use import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; it works but without most of the features that I need.

答:
Use:

import * as monaco from 'monaco-editor'
```
<p>Or:</p>
<pre class="lang-js prettyprint-override"><code>mport { editor, Uri /* , ... */ } from 'monaco-editor'
</code>```

Body:
I'm making a desktop application using electron and I decided to use Monaco Editor and install it using npm install monaco-editor but when I run the application it says Cannot find module 'monaco-editor'

I used electron-react-boilerplate as a boilerplate.

I tried both methods for installing it using ESM

This is my package.json:

{
      "name": "electron-react-boilerplate",
      "productName": "ElectronReact",
      "version": "0.17.1",
      "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
      "scripts": {
        "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
        "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
        "build-e2e": "cross-env E2E_BUILD=true yarn build",
        "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
        "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
        "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
        "flow": "flow",
        "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
        "lint": "cross-env NODE_ENV=development eslint --cache --format=pretty .",
        "lint-fix": "yarn --silent lint --fix; exit 0",
        "lint-styles": "stylelint --ignore-path .eslintignore '**/*.*(css|scss)' --syntax scss",
        "lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
        "package": "yarn build && electron-builder build --publish never",
        "package-all": "yarn build && electron-builder build -mwl",
        "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
        "package-linux": "yarn build && electron-builder build --linux",
        "package-win": "yarn build && electron-builder build --win --x64",
        "postinstall": "yarn flow-typed && electron-builder install-app-deps package.json && yarn build-dll && opencollective-postinstall",
        "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{js,jsx,json,html,css,less,scss,yml}'",
        "postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
        "preinstall": "node ./internals/scripts/CheckYarn.js",
        "prestart": "yarn build",
        "start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
        "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/main.dev.js",
        "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
        "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
        "test-all": "yarn lint && yarn flow && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
        "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe electron:./ ./test/e2e/HomePage.e2e.js",
        "test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe-live electron:./ ./test/e2e/HomePage.e2e.js",
        "test-watch": "yarn test --watch"
      },
      "lint-staged": {
        "*.{js,jsx}": [
          "cross-env NODE_ENV=development eslint --cache --format=pretty",
          "git add"
        ],
        "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
          "prettier --ignore-path .eslintignore --parser json --write",
          "git add"
        ],
        "*.{css,scss}": [
          "stylelint --ignore-path .eslintignore --syntax scss --fix",
          "prettier --ignore-path .eslintignore --single-quote --write",
          "git add"
        ],
        "*.{html,md,yml}": [
          "prettier --ignore-path .eslintignore --single-quote --write",
          "git add"
        ]
      },
      "main": "./app/main.prod.js",
      "build": {
        "productName": "ElectronReact",
        "appId": "org.develar.ElectronReact",
        "files": [
          "app/dist/",
          "app/app.html",
          "app/main.prod.js",
          "app/main.prod.js.map",
          "package.json"
        ],
        "dmg": {
          "contents": [
            {
              "x": 130,
              "y": 220
            },
            {
              "x": 410,
              "y": 220,
              "type": "link",
              "path": "/Applications"
            }
          ]
        },
        "win": {
          "target": [
            "nsis",
            "msi"
          ]
        },
        "linux": {
          "target": [
            "deb",
            "rpm",
            "snap",
            "AppImage"
          ],
          "category": "Development"
        },
        "directories": {
          "buildResources": "resources",
          "output": "release"
        },
        "publish": {
          "provider": "github",
          "owner": "electron-react-boilerplate",
          "repo": "electron-react-boilerplate",
          "private": false
        }
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
      },
      "author": {
        "name": "Electron React Boilerplate Maintainers",
        "email": "electronreactboilerplate@gmail.com",
        "url": "https://electron-react-boilerplate.js.org"
      },
      "contributors": [
        {
          "name": "Vikram Rangaraj",
          "email": "vikr01@icloud.com",
          "url": "https://github.com/vikr01"
        },
        {
          "name": "Amila Welihinda",
          "email": "amilajack@gmail.com",
          "url": "https://github.com/amilajack"
        }
      ],
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
      },
      "keywords": [
        "electron",
        "boilerplate",
        "react",
        "redux",
        "flow",
        "sass",
        "webpack",
        "hot",
        "reload"
      ],
      "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
      "jest": {
        "testURL": "http://localhost/",
        "moduleNameMapper": {
          "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
          "\\.(css|less|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
          "js",
          "jsx",
          "json"
        ],
        "transform": {
          "^.+\\.jsx?$": "babel-jest"
        },
        "setupFiles": [
          "./internals/scripts/CheckBuiltsExist.js"
        ]
      },
      "devDependencies": {
        "@babel/core": "^7.4.0",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "@babel/plugin-proposal-decorators": "^7.4.0",
        "@babel/plugin-proposal-do-expressions": "^7.2.0",
        "@babel/plugin-proposal-export-default-from": "^7.2.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
        "@babel/plugin-proposal-function-bind": "^7.2.0",
        "@babel/plugin-proposal-function-sent": "^7.2.0",
        "@babel/plugin-proposal-json-strings": "^7.2.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
        "@babel/plugin-proposal-numeric-separator": "^7.2.0",
        "@babel/plugin-proposal-optional-chaining": "^7.2.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
        "@babel/plugin-proposal-throw-expressions": "^7.2.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/plugin-syntax-import-meta": "^7.2.0",
        "@babel/plugin-transform-react-constant-elements": "^7.2.0",
        "@babel/plugin-transform-react-inline-elements": "^7.2.0",
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.4.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^10.0.1",
        "babel-jest": "^24.5.0",
        "babel-loader": "^8.0.5",
        "babel-plugin-dev-expression": "^0.2.1",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
        "chalk": "^2.4.2",
        "concurrently": "^4.1.0",
        "cross-env": "^5.2.0",
        "cross-spawn": "^6.0.5",
        "css-loader": "^3.1.0",
        "detect-port": "^1.3.0",
        "electron": "^4.1.3",
        "electron-builder": "^20.39.0",
        "electron-devtools-installer": "^2.2.4",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "^1.11.2",
        "enzyme-to-json": "^3.3.5",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-config-erb": "^0.0.2",
        "eslint-config-prettier": "^4.1.0",
        "eslint-formatter-pretty": "^2.1.1",
        "eslint-import-resolver-webpack": "^0.11.0",
        "eslint-plugin-compat": "^3.1.0",
        "eslint-plugin-flowtype": "^3.4.2",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-jest": "^22.4.1",
        "eslint-plugin-jsx-a11y": "6.2.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.1.1",
        "eslint-plugin-react": "^7.12.4",
        "eslint-plugin-testcafe": "^0.2.1",
        "fbjs-scripts": "^1.2.0",
        "file-loader": "^3.0.1",
        "flow-bin": "^0.95.1",
        "flow-runtime": "^0.17.0",
        "flow-typed": "^2.5.1",
        "husky": "^1.3.1",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^24.5.0",
        "lint-staged": "^8.1.5",
        "mini-css-extract-plugin": "^0.5.0",
        "node-sass": "^4.11.0",
        "opencollective-postinstall": "^2.0.2",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "prettier": "^1.16.4",
        "react-test-renderer": "^16.8.6",
        "redux-logger": "^3.0.6",
        "rimraf": "^2.6.3",
        "sass-loader": "^7.1.0",
        "sinon": "^7.3.1",
        "spectron": "^5.0.0",
        "style-loader": "^0.23.1",
        "stylelint": "^9.10.1",
        "stylelint-config-prettier": "^5.0.0",
        "stylelint-config-standard": "^18.2.0",
        "terser-webpack-plugin": "^1.2.3",
        "testcafe": "^1.1.0",
        "testcafe-browser-provider-electron": "^0.0.8",
        "testcafe-live": "^0.1.4",
        "testcafe-react-selectors": "^3.1.0",
        "url-loader": "^1.1.2",
        "webpack": "^4.29.6",
        "webpack-bundle-analyzer": "^3.1.0",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1",
        "webpack-merge": "^4.2.1",
        "yarn": "^1.15.2"
      },
      "dependencies": {
        "@fortawesome/fontawesome-free": "^5.8.1",
        "@material-ui/core": "^4.2.1",
        "@material-ui/icons": "^4.2.1",
        "axios": "^0.19.0",
        "classnames": "^2.2.6",
        "connected-react-router": "^6.3.2",
        "core-js": "2",
        "devtron": "^1.4.0",
        "electron-debug": "^2.1.0",
        "electron-log": "^3.0.4",
        "electron-store": "^4.0.0",
        "electron-updater": "^4.0.6",
        "history": "^4.9.0",
        "monaco-editor": "^0.19.2",
        "monaco-editor-webpack-plugin": "^1.8.2",
        "prop-types": "^15.7.2",
        "react": "^16.8.6",
        "react-copy-to-clipboard": "^5.0.1",
        "react-dom": "^16.8.6",
        "react-hot-loader": "^4.8.2",
        "react-panelgroup": "^1.0.7",
        "react-redux": "^6.0.1",
        "react-resize-observer": "^1.1.1",
        "react-router": "^5.0.0",
        "react-router-dom": "^5.0.0",
        "react-simple-resizer": "^1.3.1",
        "react-tabs": "^3.1.0",
        "react-virtualized-auto-sizer": "^1.0.2",
        "react-window": "^1.8.5",
        "redux": "^4.0.1",
        "redux-promise-middleware": "^6.1.1",
        "redux-thunk": "^2.3.0",
        "shell-quote": "^1.7.2",
        "source-map-support": "^0.5.11",
        "ssh2": "^0.8.5",
        "xterm": "^3.14.5"
      },
      "devEngines": {
        "node": ">=7.x",
        "npm": ">=4.x",
        "yarn": ">=0.21.3"
      },
      "collective": {
        "url": "https://opencollective.com/electron-react-boilerplate-594"
      },
      "browserslist": "electron 1.6"
    }

I tried with no luck using different versions of monaco-editor and monaco-editor-webpack-plugin as suggested here

This is my webpack config, well the webpack.config of electron-react-boilerplate is kind of messy and maybe there is the error, here is a link of all the config files for webpack used by electron-react-boilerplate I've only changed that file thought.

    /**
     * Base webpack config used across other specific configs
     */

    import path from 'path';
    import webpack from 'webpack';
    import { dependencies } from '../package.json';

    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

    export default {
      externals: [...Object.keys(dependencies || {})],

      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true
              }
            }
          },
          {
            test: /\.(ts|tsx)$/,
            exclude: /node_modules/,
            loader: 'ts-loader'
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          }
        ]
      },
      // entry: {
      //  // "app": './index.js',
      //  // Package each language's worker and give these filenames in `getWorkerUrl`
      //  "editor.worker": 'node_modules/monaco-editor/esm/vs/editor/editor.worker.js',
      //  "json.worker": 'node_modules/monaco-editor/esm/vs/language/json/json.worker',
      //  "css.worker": 'node_modules/monaco-editor/esm/vs/language/css/css.worker',
      //  "html.worker": 'node_modules/monaco-editor/esm/vs/language/html/html.worker',
      //  "ts.worker": 'node_modules/monaco-editor/esm/vs/language/typescript/ts.worker',
      // },

      output: {
        path: path.join(__dirname, '..', 'app'),
        // https://github.com/webpack/webpack/issues/1114
        libraryTarget: 'commonjs2'
      },

      /**
       * Determine the array of extensions that should be used to resolve modules.
       */
      resolve: {
        extensions: ['.js', '.tsx', '.ts', '.jsx', '.json']
      },

      plugins: [
        new webpack.EnvironmentPlugin({
          NODE_ENV: 'production'
        }),
        new MonacoWebpackPlugin(),
        new webpack.NamedModulesPlugin()
      ]
    };

For completeness, I'm importing Monaco Editor like so: import * as Monaco from 'monaco-editor' if I use import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; it works but without most of the features that I need.

Body:
Use:

import * as monaco from 'monaco-editor'

Or:

mport { editor, Uri /* , ... */ } from 'monaco-editor'